Data grid set to scrollable but going off screen

Radzen.Blazor Components
1

i am trying to put a grid on the page that takes up whatever space is available horizontally, but scrolls left to right if it doesn't. i copied a grid from your site that does this but when i include it, i either have to set the width to one amount (i.e. 700px) or let it go off the right hand side of the screen. the example i tried to follow is here.

As i adjust the width of the browser, the grid adjusts to fill whatever container it is in. if i copy that grid to my page, it pushes the right hand side out and makes the browser itself display a horizontal scroll bar.

The Grid i declared is this way.

<RadzenDataGrid AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.Advanced" AllowSorting="true" PageSize="5" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
                Data="@employees" ColumnWidth="300px" LogicalFilterOperator="LogicalFilterOperator.Or" SelectionMode="DataGridSelectionMode.Single">
    <Columns>
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Filterable="false" Title="ID" Frozen="true" Width="5rem" TextAlign="TextAlign.Center" />
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="First Name" Frozen="true">
            <FooterTemplate>
                Total employees: <b>@employees.Count()</b>
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="Last Name">
            <FooterTemplate>
                Footer
            </FooterTemplate>
        </RadzenDataGridColumn>
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="Title" Width="200px" />
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="Birth Date" FormatString="{0:d}" />
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="Hire Date" FormatString="{0:d}" />
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="Address" />
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="City" />
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="Region" />
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="Postal Code" />
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="Country" />
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="Home Phone" />
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="Extension" />
        <RadzenDataGridColumn Property="@nameof(Employee.FirstName)" Title="Notes" />
    </Columns>
</RadzenDataGrid>

image
image1436×536 38.9 KB

I am beginning to think you have your grid in some other kind of container which is causing it to behave but it is not in the code sample. how do i get my grid to behave the way your's is.

2

The entire code of our demos is here:

Check also using your browser developer tools inspector what elements and CSS are used.

3

Thanks for the reply. i was actually hoping for a bit more than just "Download the code and figure it out yourself". I went ahead and did that and after studying the code, i am still at a loss as to why my code won't behave. I went as far as to create a brand new project, install Radzen, and drop a grid into a page with all the settings your examples show and it still does not behave the same way. Would there be anyone else that would have a hint? has anyone else solved this problem that might be able to give me a little hint on what I could try? i really like the Radzen controls and i need it to stop pushing out the right hand side of the screen. Thanks.

4

Check this thread: I dont see the horizontal scroll bar when data grid has various columns, please help me i dont know css style - #3 by korchev

5

I wish I had seen your post prior to the weekend. It would have saved me some time. This is actually what wound up working. I don't know why enchev couldn't have just posted that to begin with. By looking over the code, and diving into forums, SO, etc..., I finally came up with this.

<main style="min-width: 0">

The solution from your suggestion is super close to this and i will be investigating the behavior from both width:0 and min-width:0. But for now, thank you for your post, I just wish i had been paying attention. Hopefully, this will help someone else who is experiencing this and stumbles across this post. Hey, something like this might be good to put in the documenation too. Just a thought.