how to set the telerikgrid height relative to the browser

2 Answers 199 Views
Grid
Afreen
Top achievements
Rank 1
Iron
Afreen asked on 18 Apr 2023, 03:09 PM

Hi,

 

I am using the telerikgrid in my web application.

I want the height of the grid should adjust by itself when user resizes the browser. The user should not get the scroll bar for the browser.

As of now I am using the following:

 Size="Telerik.Blazor.ThemeConstants.Grid.Size.Medium" Resizable="true" Pageable="false" Height="50vh" ScrollMode="GridScrollMode.Scrollable"

Using this setting when the user is resizing the browser the scroll bar coming up for browser which we dont want.

Can you please help on this?

 

Thanks & regards,

 

Afreen

2 Answers, 1 is accepted

Sort by
0
Radko
Telerik team
answered on 21 Apr 2023, 05:16 AM

Hi Afreen,

The Grid's Height parameter accepts any supported CSS values, as mentioned here: Grid Parameters. Having said this, setting Height to 50vh should work as expected, as this is directly applied as an inline style to the wrapping element of the Grid. I have prepared a simple REPL example that demonstrates this: https://blazorrepl.telerik.com/wnkIcPEJ14OsMRw554. Could you please have a look and let me know if the behavior is satisfactory?

As for the fact you observe a scroll bar - could this be something to do with another element constraining the height of the container the Grid is positioned in?

Regards, Radko Stanev Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Johan
Top achievements
Rank 1
Iron
Iron
answered on 23 Nov 2023, 03:44 PM

It's also possible to use the css style "calc()" for the height of the grid. Like:


Height = "calc(100vh - 100px)"

This is when you have content above or below the grid that is 100px in height. Rezising works great.

 

Tags
Grid
Asked by
Afreen
Top achievements
Rank 1
Iron
Answers by
Radko
Telerik team
Johan
Top achievements
Rank 1
Iron
Iron
Share this question
or