1. Home
  2. Forum
  3. Blazor
  4. Using responsive height on grid disables scroll bar

Using responsive height on grid disables scroll bar

Hi I have a Grid with  Height="70%" inside a div with height of 100% and the vertical vertical scroll appears disable, instead if I use a heigh in px for example Height=200px, the scroll works normal.

this is my code

.content {
    height: 100%;
}

<div class="content">
 <SfGrid DataSource="@VM.Clientes" AllowSorting="true" Height="70%">
            <GridColumns>
                <GridColumn Field=@nameof(ClienteDto.ClienteId) HeaderText="Num" Width="9" TextAlign="TextAlign.Left"></GridColumn>
                <GridColumn Field=@nameof(ClienteDto.Nombre) HeaderText="Nombre" Width="45" TextAlign="TextAlign.Left"></GridColumn>
                <GridColumn Field=@nameof(ClienteDto.SucursalNombre) HeaderText="Sucursal" Width="23" TextAlign="TextAlign.Left"></GridColumn>
            </GridColumns>
        </SfGrid>
</div>

Thank you



5 Replies 1 reply marked as answer
RN Rahul Narayanasamy Syncfusion Team April 9, 2021 01:28 PM UTC

Hi Luis, 

Greetings from Syncfusion. 

Query: Using responsive height on grid disables scroll bar 

We have validated your query and we suspect that you are facing some complexities while rendering a responsive Grid. If you want to be the Grid height as responsive, then you can explicitly define the height for parent component of the Grid. You need to set the parent element height to be either some static height(in px) or like below code snippets. Find the below code snippets for your reference. 

<div> 
    <div style="height: calc(100vh - 7rem);"> 
        @*Change the 7rem value based on your browser page layout*@ 
        <SfGrid DataSource="@Orders" AllowPaging="true" Height="100%"> 
            <GridPageSettings PageSize="30"></GridPageSettings> 
            <GridColumns> 
                <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
                <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
                <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
                <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
            </GridColumns> 
        </SfGrid> 
    </div> 
</div> 



Reference: 

Please let us know if you have any concerns.  

Regards, 
Rahul 


Marked as answer
LR Luis Roberto April 9, 2021 02:27 PM UTC

Thank you very much Rahul, it worked great. :)  

Take care.

RN Rahul Narayanasamy Syncfusion Team April 12, 2021 04:50 AM UTC

Hi Luis, 

Thanks for the update. 

We are happy to hear that the provided solution was helpful to achieve your requirement. 

Please get back to us if you need further assistance. 

Regards, 
Rahul 


BP Bernd Parchmann February 10, 2022 05:09 PM UTC

Hello,

I have problem with the height, too!

At first a question for the responsive height calculation: 

<div style="height: calc(100vh - 7rem);"> 
        @*Change the 7rem value based on your browser page layout*@ 
Where/What is this value on my page layout?

Second "issue" I have: I have a checkbox to enable the filtering feature of the datagrid. It seems that the size of filter bar is added under the datagrid and not extending the datagrid itself. So the result is, when I check the filtering feature to true, the vertical scrollbar is shown because the size is not enough! If I increase the rem value, then the size with filtering is okay, but if I disable the filtering feature I have a space under my datagrid!

Someone has a solution?

Greetings,
Bernd

RN Rahul Narayanasamy Syncfusion Team February 11, 2022 01:32 PM UTC

Hi Bernd, 

Greetings from Syncfusion. 

Query: At first a question for the responsive height calculation: <div style="height: calc(100vh - 7rem);"> @*Change the 7rem value based on your browser page layout*@ Where/What is this value on my page layout? 

You need to set the 7rem(or increase) value based on your browser/screen resolution manually. For setting the Height to 100% requires the datagrid parent element to have explicit height or you can use calc function to set explicit height based on the browser layout. 

Reference: 

Query: So the result is, when I check the filtering feature to true, the vertical scrollbar is shown because the size is not enough! If I increase the rem value, then the size with filtering is okay, but if I disable the filtering feature I have a space under my datagrid! 

We suspect that when you enable the Filtering dynamically, the browser vertical scrollbar. If yes, we suggest you to set the parent element style dynamically like below code snippets. Find the below code and sample for your reference. 

 
<SfCheckBox Label="Enable Filtering" @onchange="onChange" @bind-Checked="isChecked"></SfCheckBox> 
<div> 
    <div style="height: @heightValue"> 
        @*Change the 7rem value based on your browser page layout*@ 
        <SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="@isChecked" AllowPaging="true" Height="100%"> 
            <GridPageSettings PageSize="30"></GridPageSettings> 
            <GridColumns> 
                .. .  
            </GridColumns> 
        </SfGrid> 
    </div> 
</div> 
 
 
 
@code{ 
    SfGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    private bool isChecked = false; 
    string heightValue { get; set;} = "calc(100vh - 7rem)"; 
 
    private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) 
    { 
        if(args.Value.ToString() == "True") 
        { 
            heightValue = "calc(100vh - 9rem)"; 
        } else 
        { 
            heightValue = "calc(100vh - 7rem)"; 
        } 
    } 
 
    .. .  
} 



Please let us know if you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon