Search code examples
c#blazormudblazor

Stop MudBlazor from resizing table when screen's width gets tight

I have a MudBlazor table and it keeps doing this when resizing the window:

From: enter image description here

To:

enter image description here

My code:

<MudCard Elevation="0">
    <MudCardContent>
        <MudTable Style="background-color: #9d1213" Elevation="22" Class="py-8 px-10" Items="@rewards" Virtualize="true" Hover="true" SortLabel="Sort By">
            <HeaderContent>
                <MudTh Class="text-white"><MudTableSortLabel 
                    SortBy="new Func<Reward, object>(x=>x.Name)">Reward</MudTableSortLabel></MudTh>
                <MudTh Class="text-white"><MudTableSortLabel Enabled="@enabled" 
                    SortBy="new Func<Reward, object>(x=>x.HasBeenUsed)">Used ?</MudTableSortLabel></MudTh>
                <MudTh Class="text-white"><MudTableSortLabel InitialDirection="SortDirection.Ascending" 
                    SortBy="new Func<Reward, object>(x=>x.ExpiresOn)">Expires on</MudTableSortLabel></MudTh>
            </HeaderContent>
            <RowTemplate>
                <MudTd Class="text-white" DataLabel="Name">@context.Name</MudTd>
                <MudTd Class="text-white" DataLabel="HasBeenUsed">@(context.HasBeenUsed == true ? "Yes" : "No")</MudTd>
                <MudTd Class="text-white" DataLabel="ExpiresOn">
                    @context.ExpiresOn.ToString("d", CultureInfo.CreateSpecificCulture("en-US"))
                </MudTd>
            </RowTemplate>
            <PagerContent>
                <MudTablePager Class="text-white" PageSizeOptions="new int[] { 10, 25, 50, 100 }" />
            </PagerContent>
        </MudTable>
    </MudCardContent>
</MudCard>

I don't know enough of CSS or else to know how to not make it do it and I've been trying so many things from the MudBlazor website to CSS changes but it doesn't do anything

Solution

  • MudBlazor is reactive by default, meaning it switches to mobile friendly versions of it's components by default. You can disable the table automatically switching to the mobile version by setting the Breakpoint property on your MudTable to Breakpoint.None. This is referenced in the default table documentation.

    The table can be prevented from breaking into mobile layout by setting the Breakpoint to Breakpoint.None

    If you still want mobile layouts on really small screens, you can set the Breakpoint property to one of the other values to control when MudBlazor switches to mobile components.

    Here is an interactive example.