Description
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