Grid with Responsive="true" is not responsive

[henkla]

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

[BigDi]

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.

[gvreddy04]

@BigDi Please share a sample GitHub repo with minimal steps to reproduce the issue. I will take a look.

[BigDi]

@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.