I am using MudBlazor and want to fix the height of the table so the page size footer is anchored to the bottom of the container if the search results show less rows that the page size.
For example, this is a normal table:
when searching and less than 10 records exist the table appears smaller:
I've tried using the Height attribute on the MudTable tag but this forces a scroll bar if the user changes the page size.
The behaviour I am looking for is the page size footer remains in the same place if the row number falls below the page size settings.
If there any css I can override to achieve this. It would make the visual look much better.
Edit:Here is a basic code snippet as requested.https://try.mudblazor.com/snippet/waGokwYIcbquRxRe
2nd Edit:Here it is inside a dialoghttps://try.mudblazor.com/snippet/wOGeuGYImQAWoahb
Here the the table definition (as a razor component):
<MudTable Elevation="1" Striped="false" Bordered="true" Hover="true" Items="@data" T="CountriesDetail" Filter="new Func<CountriesDetail,bool>(SearchFunction)"><ToolBarContent><MudText Typo="Typo.h6" Color="Color.Primary">Countries</MudText><MudSpacer /><MudTextField @bind-Value="searchString" Immediate="true" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField></ToolBarContent><NoRecordsContent><MudText Typo="Typo.body1" Class="mud-text-secondary mt-6 mb-4">No data to display</MudText></NoRecordsContent><ColGroup><col style="width: 100%" /></ColGroup><HeaderContent><MudTh>Country Name</MudTh></HeaderContent><RowTemplate><MudTd DataLabel="Name">@context.CountryName</MudTd></RowTemplate><PagerContent><MudTablePager/></PagerContent></MudTable>@code { public class CountriesDetail { public string ID { get; set; } = string.Empty; public string CountryName { get; set; } = string.Empty; } private List<CountriesDetail> data = new(); private string searchString = string.Empty; protected override void OnInitialized() { data.Add(new() { ID = "1", CountryName = "Country 1" }); data.Add(new() { ID = "2", CountryName = "Country 2" }); data.Add(new() { ID = "3", CountryName = "Country 3" }); data.Add(new() { ID = "4", CountryName = "Country 4" }); data.Add(new() { ID = "5", CountryName = "Country 5" }); data.Add(new() { ID = "6", CountryName = "Country 6" }); data.Add(new() { ID = "7", CountryName = "Country 7" }); data.Add(new() { ID = "8", CountryName = "Country 8" }); data.Add(new() { ID = "9", CountryName = "Country 9" }); data.Add(new() { ID = "10", CountryName = "Country 10" }); data.Add(new() { ID = "11", CountryName = "Country 11" }); data.Add(new() { ID = "12", CountryName = "Country 12" }); } private bool SearchFunction(CountriesDetail element) => PerformSearch(element, searchString); private bool PerformSearch(CountriesDetail element, string searchString) { if (string.IsNullOrWhiteSpace(searchString)) return true; if (element.CountryName.Contains(searchString, StringComparison.OrdinalIgnoreCase)) return true; return false; }}
Here is the dialog:
<MudDialog><TitleContent><MudText>Country Search</MudText></TitleContent><DialogContent><TableDef></TableDef></DialogContent><DialogActions></DialogActions></MudDialog>
And here is how it gets called:
@inject IDialogService DialogService<MudButton OnClick="@LoadDialog">Go</MudButton>@code{ private void LoadDialog() { var options = new DialogOptions { CloseOnEscapeKey = true }; DialogService.Show<Dialog>("", options); }}
Thanks in advance