vikramlearning
Grid with Responsive="true" is not responsive
Describe the bug
The grid that I use sometimes (depending on the data displayed) expands x-wise. That's why i want it to be responsive. I have set Responsive="true", but the grid still isn't responsive.
I have tried wrapping the grid in <div class="table-responsive"> but with no result.
The result is the same no matter which browser I try (Edge, Chrome, Firefox).
Expected behavior The grid should be contained within a div/container that allows the user to side-scroll content, if grid data extends the native viewport.
Screenshots
Actual result (there are columns to the right that are not visible, due to grid not being responsive)
Versions (please complete the following information):
- .NET Version: .NET 8
- BlazorBootstrap: 3.0
- Blazor WebAssembly / Server: Server
- Blazor Interactive Render Mode: Server
- Blazor Interactivity Location: Global
Sample code
<Grid @ref="grid"
TItem="DbContext.Data.Route"
Class="table table-hover table-bordered table-striped"
Data="routes"
AllowFiltering="true"
AllowSorting="true"
AllowPaging="true"
PageSize="10"
PageSizeSelectorItems="@(new[] { 10, 25, 50, 100 })"
HeaderRowCssClass="custom-grid-header"
PageSizeSelectorVisible="true"
Responsive="true"
AllowDetailView="true">
<GridColumns>
<GridColumn TextNoWrap="true" TItem="DbContext.Data.Route" HeaderText="Path" PropertyName="Path" Sortable="true" SortKeySelector="item => item.Path">
<Button TooltipTitle="Delete" Color="ButtonColor.Danger" Size="ButtonSize.Small" @onclick="() => OnDeleteButtonClick(context)">
<Icon Name="IconName.Trash"/>
</Button>
<Button TooltipTitle="Edit" Color="ButtonColor.Secondary" Size="ButtonSize.Small" @onclick="() => OnEditButtonClick(context)">
<Icon Name="IconName.Pencil"/>
</Button>
<Button TooltipTitle="Details" Color="ButtonColor.Primary" Size="ButtonSize.Small" @onclick="@(() => NavMan.NavigateTo($"/routes/{context.Id}"))">
<Icon Name="IconName.Eye"/>
</Button>
<small class="mx-1">
<Tooltip Placement="TooltipPlacement.Top" Title="@context.Path">
@context.Path.Truncate(Settings.CurrentValue.RoutePathLengthBeforeTruncation)
</Tooltip>
</small>
@if (context.Description is not null)
{
<Tooltip Title="@context.Description" role="button">
<Icon Name="IconName.InfoCircleFill"></Icon>
</Tooltip>
}
</GridColumn>
<GridColumn TextNoWrap="true" TItem="DbContext.Data.Route" HeaderText="Host" PropertyName="Host" Sortable="true" SortKeySelector="item => item.Host.Name" Filterable="false">
@* Filter on nested objects not supported https://github.com/vikramlearning/blazorbootstrap/issues/542 *@
<small>@context.Host.Name</small>
</GridColumn>
<GridColumn TItem="DbContext.Data.Route" HeaderText="Endpoint Path" PropertyName="EndpointPath" Sortable="true" SortKeySelector="item => item.EndpointPath ?? string.Empty">
<small>@context.EndpointPath</small>
</GridColumn>
<GridColumn TItem="DbContext.Data.Route" HeaderText="Endpoint" PropertyName="Endpoint" Sortable="true" SortKeySelector="item => item.Endpoint.Name" Filterable="false">
@* Filter on nested objects not supported https://github.com/vikramlearning/blazorbootstrap/issues/542 *@
<small>@context.Endpoint.Name</small>
</GridColumn>
<GridColumn TItem="DbContext.Data.Route" HeaderText="Logical Address" PropertyName="LogicalAddress" Sortable="true" SortKeySelector="item => item.LogicalAddress ?? string.Empty">
<small>@context.LogicalAddress</small>
</GridColumn>
<GridColumn TItem="DbContext.Data.Route" HeaderText="OSC HSA-ID" PropertyName="OriginalServiceConsumerHsaId" Sortable="true" SortKeySelector="item => item.OriginalServiceConsumerHsaId ?? string.Empty">
<small>@context.OriginalServiceConsumerHsaId</small>
</GridColumn>
<GridColumn TItem="DbContext.Data.Route" HeaderText="Policy" PropertyName="AuthorizationPolicy" Sortable="true" SortKeySelector="@(item => item.AuthorizationPolicy == null ? string.Empty : item.AuthorizationPolicy.Name)" Filterable="false">
@* Filter on nested objects not supported https://github.com/vikramlearning/blazorbootstrap/issues/542 *@
<small>@context.AuthorizationPolicy?.Name</small>
</GridColumn>
<GridColumn TItem="DbContext.Data.Route" HeaderText="Log Body" PropertyName="LogMessageBody" Sortable="true" SortKeySelector="item => item.LogMessageBody">
<Tooltip Title="@context.LogMessageBody.GetDescription()">
<Icon Name="@GetTrackingStateIcon(context.LogMessageBody)"/> <small>@context.LogMessageBody</small>
</Tooltip>
</GridColumn>
</GridColumns>
<GridDetailView TItem="DbContext.Data.Route">
<RouteDetails RouteParameter="@context"/>
</GridDetailView>
</Grid>
GitHub repo None
Desktop (please complete the following information):
- OS: Windows 11
- Browser: Edge
- Version: 130.0.2849.56
Smartphone (please complete the following information):
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context None
I have the same problem. I've already invested some time. I found out that when using the enumeration filter, the size of the responsive area is not calculated correctly. You can also reduce the size of the browser and at some point the scrollbar appears. If I remove all the enumeration filters, it works as expected.
@BigDi Please share a sample GitHub repo with minimal steps to reproduce the issue. I will take a look.
@BigDi Please share a sample GitHub repo with minimal steps to reproduce the issue. I will take a look.
I create a test application. https://github.com/BigDi/TestApp When you used a monitor with HD resolution it will look like:
In the table outside the window, there is a Test3 column. I would have expected the scrollbar.
If the window is now reduced, the scroll bars appear very late.
When you remove the enum column it is working as expected.