Height of grid in a custom component

I have a page with a button and and a datagrid. I want to use this page as a custome component in another page. I can get it to work functionally but i can't figure out how to get the datagrid height to work properly.

If i set the height of the dg in px then it doesn't work if i rezise the browser window, so i tried setting the size as calc(100vh - 200px) which works. But when i look at teh parent page where the datagrid is part of teh custom component this sizing calc doesn't work because i hve other components above it so teh calc no longer works. I have tried playing with CSS and stle heights and all manner of size options but i can't find the right way to do this.

Does any one know how to solve this?

Vladimir

thanks fo this. I had a good read and experimented with this but i can't get it to do what i want. I think a major part of the problem is that the header for the grid is only visible if you fix the height of the grid, if you set it to inherit its height then the header bar disapppears as you scroll down whcih is what i'm trying to avoid.

A much simpler scenario is how would you resize the grid if it were on a page with splitter bars? The need is to have the grid headers always visible and let the user scroll.

Can this be done?

Thanks

John

That works fine if the Datagrid is directly in the splitter but it doesn't work if the datagrid is inside a custom component. Setting a style attribute of the components doesn't have any effect.

the only way i could get teh custom compoent and its child DG to resize was to add

.content{
height:100%;
}

to my top level custom style sheet.

I tried this CSS Isolation not working with Radzen components - #11 by deadlydog

but couldn't get it to work.

It works but it feels that by putting the CSS at this level i may run into problems elsewhere.