Responsive width of Grids on tablets

[Eduardo]

Greetings!

I'm trying to make a responsive grid, and I'd like it to be displayed on tablets the same way it is displayed on mobile. The problem is that on tablets, the bootstrap cols get too large and only half of the elements are displayed.

This behavior only occurs with the Grid on screen, if I remove it the responsivity works just fine.

I'm sending a video and the code for more details

Am I doing something wrong, or this is the way it is by default?

Best regards

Attachment: Video_and_Code_33637969.zip

[Rahul Narayanasamy]

Hi Consensu, 

 

Greetings from Syncfusion. 

 

We have validated your query and we suspect that you are facing difficulties while setting the Grid height as percentage (%) values(responsive to the parent container). We would like to inform you that you need to provide static/ calculated height to the parent container of the Grid if you have defined the Grid Height property value as percentage value.  

 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/scrolling#responsive-with-parent-container 

 

Find the below code snippets and sample for your reference. 

 

[static height] 

 

<div style="width:700px; height:500px"> 

    <SfGrid DataSource="@Orders" Height="100%" Width="100%" AllowTextWrap="true" AllowPaging="true"> 

        <GridTextWrapSettings WrapMode="WrapMode.Header"></GridTextWrapSettings> 

        <GridColumns> 

            . . . 

        </GridColumns> 

    </SfGrid> 

</div> 

(Or) 

 

[calculated height] 

 

<div style="width:calc(100vw - 20rem); height:calc(100vh - 7rem);"> 

    @*Change the 20rem and 7rem values based on your browser page layout*@ 

    <SfGrid DataSource="@Orders" Height="100%" Width="100%" AllowTextWrap="true" AllowPaging="true"> 

        <GridTextWrapSettings WrapMode="WrapMode.Header"></GridTextWrapSettings> 

        <GridColumns> 

            . . . 

        </GridColumns> 

    </SfGrid> 

</div> 

 

Please let us know if you have any concerns. 

 

Regards, 

Rahul