Grid to 100% of container

1 Answer 35 Views
Grid
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
DoomerDGR8 asked on 16 Jul 2022, 11:18 PM

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?

1 Answer, 1 is accepted

Sort by
0
Mihaela
Telerik team
answered on 21 Jul 2022, 05:33 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Mihaela
Telerik team
Share this question
or