I’m using Blazor, where I have a Component to load a seperate Table (with options to search and use sorting). I have a div around my table with class overflow-x-auto, but it still makes the whole page go out of the screen.
I’ve also tried to set it via style="overflow:scroll;", I have tried it via a seperate class, but nothing seems to make it work.
I do see the css being applied in F12 developer tools.
I feel like im missing something. Can someone take a short look for me and see what im missing?
<div class="row mb-3">
<!-- Search Box -->
<div class="col-lg-6 mb-1">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..." @bind="SearchTerm" @oninput="OnSearchInputChanged" />
<span class="input-group-text">
<i class="bi bi-search"></i>
</span>
</div>
</div>
<div class="col-lg-4">
<select @bind="@SelectedPeriod" class="form-select">
<option value="" disabled>Select a Period</option>
@foreach (var period in Periods)
{
<option value="@period">@period</option>
}
</select>
</div>
<div class="col-lg-2">
<LoadingButton OnClick="async () => await RefreshReport()" InitialButtonText="Refresh" LoadingIcon="true" LoadingButtonText="Loading" w100="true" />
</div>
</div>
<div class="row mb-3">
<div class="col-lg-12 text-end">
<LoadingButton OnClick="DownloadAsFile" InitialButtonText="Download" LoadingIcon="true" LoadingButtonText="Loading" ButtonStyle="btn-success" />
</div>
</div>
@if (FilteredData != null)
{
<div class="row mt-3">
<div class="col-lg-12 text-start">
<span>@(FilteredData?.Count() ?? 0) @(FilteredData?.Count() == 1 ? "row found" : "rows found")</span>
</div>
</div>
}
<div class="table-responsive overflow-x-auto">
<table class="table table-hover table-sm">
<thead>
<tr>
@foreach (var header in ColumnHeaders)
{
if (!ExcludedColumns.Contains(header))
{
<th class="sortable-header">
<span style="display: inline-block;">@header</span>
<svg class="icon" width="16" height="16" style="display: inline-block;">
<use href="#fluent--arrow-sort-24-regular"></use>
</svg>
</th>
}
}
</tr>
</thead>
<tbody>
@foreach (var row in FilteredData)
{
<tr>
@foreach (var header in ColumnHeaders)
{
if (!ExcludedColumns.Contains(header))
{
<td>@row[header]</td>
}
}
</tr>
}
</tbody>
</table>
</div>
EDIT: The table becomes scrollable as soon as a smaller screen is used.
You need to sign in to view this answers
Leave feedback about this