Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 18 Nov 2021 05:40 by Kumar
Phil
Created on: 04 Mar 2020 15:22
Category: Grid
Type: Bug Report
2
Blazor Grid won't show horizontal scrollbars. Just expands own width/page width even when static widths are set for columns and Grid Width set to 100%

I have a blazor grid with a large number of columns which I would like to have the width of the page and a horizontal scrollbar to be able to scroll through all of the columns.

According the the documentation I have found (https://demos.telerik.com/blazor-ui/grid/scrolling), setting the width of the grid to 100% and providing widths for the columns which exceed that of the width of the grid/page should cause the horizontal scrollbar to appear. Instead of doing this, however, the grid just expands horizontally to fit all of the columns, no matter what I try. In addition, it appears to be expanding the entire page horizontally to fit itself, as it is increasing the size of all of my bootstrap columns so that it fits within the bootstrap container.

Here is an example of a page containing a grid where I am experiencing this:

 


@page "/admin/users/manageusers"
@inherits ManageUsersBase


<h3>Manage Users</h3>

<WS7.Components.PDAuthorizeBase AllowedRoleIds="ManageAllUsers,ManageAssignedUsers" />
@if (this.Users == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <div class="form-group">
        <label for="UserSearch" class="col-form-label">Search</label>
        <input id="UserSearch" class="form-control" type="search" aria-label="User Search" placeholder="Search" @bind-value="Filter" @bind-value:event="oninput" />
    </div>


    <TelerikGrid Data="@FilteredUsers" TItem="WS7.Engine.Models.ViewModels.ManageUsersViewModel" Height="600px" Width="100%" Pageable="true" PageSize="40" Sortable="true" Groupable="false"
                 FilterMode="GridFilterMode.FilterMenu" Resizable="true" Reorderable="true" OnEdit="EditUser" ScrollMode="@GridScrollMode.Scrollable">
        <GridToolBar>
            <GridCommandButton OnClick="(()=>AddUser())">
                <span class="oi oi-plus"></span> Add
            </GridCommandButton>
        </GridToolBar>
        <GridColumns>
            <GridCommandColumn Width="100px">
                <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>


            </GridCommandColumn>

            <GridColumn Field="UserName" Title="User Name" Width="500px" />
            <GridColumn Field="Email" Title="Email" Width="500px" />
            <GridColumn Field="FirstName" Title="First Name" Width="500px" />
            <GridColumn Field="LastName" Title="Last Name" Width="500px" />
            <GridColumn Field="AccountStatus" Title="Account Status" Width="500px">
                <Template>
                    @{
                        string toolTip;
                        WS7.Engine.Models.ViewModels.ManageUsersViewModel user = context as WS7.Engine.Models.ViewModels.ManageUsersViewModel;
                        toolTip = "Account Status: " + user.AccountStatus;
                        toolTip += Environment.NewLine + "Active: " + user.Active.ToString();
                        toolTip += Environment.NewLine + "Email Confirmed: " + user.EmailConfirmed.ToString();
                    }
                    <div class="badge badge-pill badge-info">
                        <span class="oi oi-info" data-toggle="tooltip" data-placement="top" title="@toolTip"></span>
                    </div>
                </Template>
            </GridColumn>

            @*<GridCommandColumn Width="90px">
                    <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
                </GridCommandColumn>*@
        </GridColumns>
    </TelerikGrid>
}

---

ADMIN EDIT

You can find some more details on  the origin of the issue in the thread below and in the following Knowledge Base article, which also offers a few ideas for solutions to this browser behavior: https://docs.telerik.com/blazor-ui/knowledge-base/grid-bootstrap-flex-width-issue

---

5 comments
Kumar
Posted on: 18 Nov 2021 05:40

Hey Phil, 

did you found a work around for this? I'm still struggling to get horizontal scroll bar working. I even added fixed height to the grid but the horizontal scroll bar doesn't show up.

 

Thanks,

Kumar

Mark
Posted on: 03 Feb 2021 22:34
Giving the grid container a class with "min-width:0;" stops this from happening within a 100% width Grid layout using 1fr type sizing, perhaps try this for the flex style layout.
ADMIN
Marin Bratanov
Posted on: 05 Mar 2020 14:02

Hi Phil,

That was a great question and this turns out to be a flexbox behavior. Below is the simplest test case that shows what's happening.

The <app> element has display:flex by default (or some other element has in the layout, does not matter much). Our table has table-layout:fixed so the column widths can actually take affect, and width:100% so it can stay within its container visually. The combination of these two rules, the flexbox, and the large table width (stemming from <col> elements with width - this is how the column Width parameters render) causes this behavior where the layout stretches to accommodate the entire table.

What you will see there is that the .app element is as wide as the table (2500px), instead of the expected - as wide as the viewport. Here's the same thing in our kendo dojo runner so you can also see it live https://dojo.telerik.com/@bratanov/ETinEKOG/2 (the element structure in a blazor app is a bit different, which is why the element that gets stretched is different).

 

<style>
    .app {
        /* the flex display gets stretched by the table that has width:100% and table-layout:fixed */
        display: flex;
        background:yellow;
    }

    .grid-wrap {
        /* showcases the expected width of the "grid" parent element, but the layout will still
        stretch to the full width of the actual table element because of the flex behavior */
        border: 1px solid red;
        width: 50%;
    }
</style>

<div class="app">
    <div class="test-wrap">
        compare the scollbar and the red div
    </div>
    <div class="test-2-wrap">
        <div class="grid-wrap">

            <!-- this table simulates what the Telerik grid renders -->
            <table style="table-layout:fixed; width: 100%;">
                <colgroup role="presentation">
                    <col style="width: 2500px">
                </colgroup>
                <thead role="rowgroup">
                    <tr role="row" data-render-row-index="0">
                        <th colspan="1" class="k-header ">
                            User Name
                        </th>
                    </tr>
                </thead>
            </table>

        </div>
    </div>
</div>

 

 

 

One solution is to fix the grid width with a value that is not percentage - e.g., vw units (or pixels):

 

<div class="form-group">
    <label for="UserSearch" class="col-form-label">Search</label>
    <input id="UserSearch" class="form-control" type="search" aria-label="User Search" placeholder="Search" @bind-value="Filter" @bind-value:event="oninput" />
</div>


<TelerikGrid Data="@FilteredUsers" Width="80vw">
    <GridColumns>
        <GridColumn Field="UserName" Title="User Name" Width="2500px" />
    </GridColumns>
</TelerikGrid>

@code{
    public class SampleData
    {
        public int Id { get; set; }
        public string UserName { get; set; }
    }
    string Filter { get; set; }
    List<SampleData> FilteredUsers { get; set; }
}

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Phil
Posted on: 04 Mar 2020 16:55

Hi Martin,

Thank you for your response. My main confusion is why adding a telerik grid is expanding the constraints of the parent container. If I remove the Telerik Grid, the container resizes to the expected page size, but the moment the "too wide" grid is added, the scope/size of the page increases. All of the styles I have tried have not been able to constrain the width of the grid to what is considered 100% page with prior to the grid being added. I have attached a screenshot of the behavior I mention on the same page sans-grid.

Attached Files:
ADMIN
Marin Bratanov
Posted on: 04 Mar 2020 16:39

Hi Phil,

In my tests the grid fills up 100% of its container. The tricky part may be defining constraints for the container itself. In the provided sample, the parent element of the grid (which defines its width) is pretty wide - I am attaching a screenshot of what I get. I am also attaching the sample project I used to test this - I added a <div> around the grid to better showcase how the layout looks and how the grid behaves so you can use that as a reference point.

You can also find more details on how widths work in the following article: https://docs.telerik.com/blazor-ui/components/grid/columns/width

Am I missing something? If comparing against this sample does not help you get the desired layout, can you modify it to showcase the grid issue so I can examine it?

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Attached Files:
Create an account Log In
View
Type
Status
Category