How to stop Mud Blazor MudTable column from expanding to fit text

Question

I have a table with 5 columns, one of which contains some very long user IDs (with no spaces). Rather than the text being clipped off, it expands the column to fit all of it, pushing the others off to the right and causing a scrollbar to appear.

I have been at this for hours, trying to figure out how to fix the width and stop it overflowing. I've tried setting the table-layout property to fixed on the MudTable element, and playing around with a variation of width:20%; word-wrap:break-word; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; on anything I can think of such as col MudTd etc and nothing has worked or even had any effect whatsoever.

The documentation doesn't seem to cover overflowing at all which is frustrating. Setting col width works great until the data gets too long, and setting max-width doesn't help either.

It seems like something that should be catered for in the MudTable, can anyone tell me what I'm doing wrong, or suggest a fix?

This is my table:

    <MudTable id="results-table" ServerData="@(new Func<TableState, Task<TableData<HiHi1User>>>(LoadUsers))" RowsPerPage="50" FixedHeader=@_tableFixedHeader FixedFooter=@_tableFixedFooter
         Style="table-layout:fixed" Height=@_tableFixedHeight Hover="true" Striped="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Primary">
        <ColGroup>
            <col style="width:20%;" />
            <col style="width:20%;" />
            <col style="width:20%;" />
            <col style="width:20%;" />
            <col style="width:20%;" />
        </ColGroup>
        <HeaderContent>
            <MudTh id="user-id-hdr">User ID</MudTh>
            <MudTh id="group-id-hdr">Group ID</MudTh>
            <MudTh id="current-versions-hdr">Current Version</MudTh>
            <MudTh id="max-versions-hdr">Max Version</MudTh>
            <MudTh id="can-alter-gnf-hdr">Can Alter Night Forwarding Status</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd id="user-id-val" DataLabel=@nameof(context.UserId)>@context.UserId</MudTd>
            <MudTd id="group-id-val" DataLabel=@nameof(context.GroupId)>@context.GroupId</MudTd>
            <MudTd id="current-versions-val" DataLabel=@nameof(context.CurrentVersion)>@context.CurrentVersion</MudTd>
            <MudTd id="max-versions-val" DataLabel=@nameof(context.MaxVersion)>@context.MaxVersion</MudTd>
            <MudTd id="can-alter-gnf-val" DataLabel=@nameof(context.CanAlterNightForwardingStatus)>@context.CanAlterNightForwardingStatus</MudTd>
        </RowTemplate>
        <PagerContent>
            <MudTablePager HorizontalAlignment="HorizontalAlignment.Left" HidePagination="false" />
        </PagerContent>
    </MudTable>

Thanks a lot.

score 5 · Accepted Answer · answered Mar 29 '23 at 16:20

Try this.overflow-wrap:break-word;max-width:200px; on your row.

max-width needs to be set to a > 0 value for some reason, but you can control the width of the column in the ColGroup style.

<RowTemplate>
    <MudTd DataLabel="Nr">@context.Number</MudTd>
    <MudTd DataLabel="Sign">@context.Sign</MudTd>
    <MudTd DataLabel="Name" Style="overflow-wrap:break-word;max-width:10px;">@context.Name</MudTd>
    <MudTd DataLabel="Position">@context.Position</MudTd>
    <MudTd DataLabel="Molar mass" Style="text-align:right">@context.Molar</MudTd>
</RowTemplate>

mudblazor snippet

So that's it! Seems counter-intuitive to have to set the max width on top of the width in the ColGroup, especially since the value doesn't seem to matter! I tried max-width on the ColGroup, but not the Td annoyingly! This has solved it though, thanks very much. — MissWizify, Mar 30 '23 at 11:31

How to stop Mud Blazor MudTable column from expanding to fit text

1 Answers1