[Solved] How to get controls to take up 100% of vertical space w/o scrolling?

[Dmitri Nesteruk]

I'm using RadSplitter to split my web page into several sections of varying sizes and in each section, I'm using an MVC control (Grid or Tab). Unfortunately, I can't get these controls to occupy exactly 100% of vertical space allocated to them. For example, setting style="height: 100%" for a grid simply doesn't work (no effect), while setting it for t-grid-content takes a lot more than 100%, causing scroll bars to appear.

A secondary question I have is this: how can I ensure that the number of items per page in a grid always corresponds to the vertical space present in the grid? I'm asking because I don't want a fixed .Pageable(X) statement, but rather want something more adaptable so that users don't have to scroll within the grid itself.

Your help is very much appreciated!

[Alex Gyoshev]

Hello Dmitri,

Regarding the 100% height, the most robust solution would be to size the components with JavaScript, although we could try to find a CSS-only solution. In either case, submitting a sample project of your setup will enable us to find the solution for you.

Regarding your second question, the grid does not support such scenarios. You may be able to work around that by sending the viewport size to the server and doing some calculations, but the solution would be too fragile to suggest it.

Regards,
Alex Gyoshev
the Telerik team