Donate

Blazor QuickGrid Component Inside Div Element Overlaps Horizontally

Hello,

As I was experimenting with Blazor QuickGrid component, I decided to populate the Grid component with records from WideWorldImporters database and opt to display at least nine columns. Upon rendering on the page, I noticed that the QuickGrid component overlaps horizontally even if it's inside a div element with bootstrap row as it's class.
Blazor QuickGrid Component Inside Div Element Overlaps Horizontally
To fix this issue, I added an id attribute to the grid component so I can apply a css style explicitly.
<QuickGrid Id="qGridCustomer" Class="table table-responsive table-bordered table-striped" Items="@FilteredCustomers" Pagination="@pagination">
    <PropertyColumn Title="Customer Name" Property="@(p => p.CustomerName)" Sortable="true">
        <ColumnOptions>
            <div class="search-box">
                <input type="search" autofocus @bind="nameFilter" @bind:event="oninput" placeholder="Customer Name..." />
            </div>
        </ColumnOptions>
    </PropertyColumn>
    <PropertyColumn Title="Category" Property="@(p => p.CustomerCategory.CustomerCategoryName)" Sortable="true" />
    <PropertyColumn Title="Contact Person" Property="@(p => p.PrimaryContactPerson.FullName)" Sortable="true" />
    <PropertyColumn Title="Deliver City" Property="@(p => p.DeliveryCity.CityName)" Sortable="true" />
    <PropertyColumn Title="Credit Limit" Property="@(p => p.CreditLimit)" Format="#,##0.00" Sortable="true" />
    <PropertyColumn Title="Account Opened Date" Property="@(p => p.AccountOpenedDate)" Format="yyyy-MM-dd" Sortable="true" />
    <PropertyColumn Title="Phone Number" Property="@(p => p.PhoneNumber)" />
    <PropertyColumn Title="Fax Number" Property="@(p => p.FaxNumber)" />
    <PropertyColumn Title="Website" Property="@(p => p.WebsiteUrl)" Sortable="true" />
</QuickGrid>
Next is to create a style and set it's display attribute to block and overflow-x to auto. After that, the grid component does not stretch beyond it's container horizontally.
#qGridCustomer {
    display: block;
    overflow-x: auto; 
}
Blazor QuickGrid Component Inside Div Element Overlaps Horizontally


Cheers!

Comments

Donate

Popular Posts From This Blog

WPF CRUD Application Using DataGrid, MVVM Pattern, Entity Framework, And C#.NET

How To Insert Or Add Emojis In Microsoft Teams Status Message

TypeScript Error Or Bug: The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program.