Grid to 100% of container

[DoomerDGR8]

Hi!

Why is it so difficult to have the gid set itself to 100% of the height of the container it is in? All the guides I see here are just trial and error attempts.

Here is my CSS hierarchy:

GridFullHeight.png

I need my grid to be using all available height of the container. Currently, the main grid is only taking half of the screen (450px, set internally by Kendo) and expanding the details template with a tab strip and a child grid, the look and feel just doesn't look or feel right. The child grid doesn't need to have extra length. In fact, it should do the reverse: max height just enough to show all rows and not a pixel more. How do I set this up?

[Mihaela]

Hi,

You could remove the default height of the Grid scrollable area by setting the height to "auto" in the Scrollable configuration:

.Scrollable(s => s.Height("auto")) // Remove the default height.

Also, ensure that no explicit height is applied to the master/child grid.

Here is a REPL example for you to review:

https://netcorerepl.telerik.com/cQYBclkf31AlyzgL11

If you have any questions or concerns, don't hesitate to share them.

 

Regards, Mihaela Progress Telerik