MudBlazor: MudTable on Mobile device: broken layout?

I have a simple MudTable:

<MudTable Items="_conferences" Hover="true" Elevation="3" Filter="new Func<Conference, bool>(FilterByLocalSearch)">
            <ToolBarContent>
                <MudTextField @bind-Value="_searchString" Placeholder="Suchen" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mr-2"></MudTextField>
                <MudSelect T="Speaker" Label="Speaker" ValueChanged="FilterBySpeakerAsync" Class="mr-2">
                    @foreach (var speaker in _speakers)
                    {
                        <MudSelectItem T="Speaker" Value="speaker">@speaker.FirstName @speaker.LastName</MudSelectItem>
                    }
                </MudSelect>
                <MudDatePicker Culture="@CultureInfo.GetCultureInfo("de-De")" DateFormat="dd.MM.yyyy" Label="Ab (Datum)" DateChanged="FilterByStartDateAsync" DisableToolbar="true" Editable="true"  Class="mr-2" />
                <MudDatePicker Culture="@CultureInfo.GetCultureInfo("de-De")" DateFormat="dd.MM.yyyy" Label="Bis (Datum)" DateChanged="FilterByEndDateAsync" DisableToolbar="true" Editable="true"  Class="mr-2" />
            </ToolBarContent>
            <HeaderContent>
                <MudTh Style="color: white; background-color: #ff584f">Titel</MudTh>
                <MudTh Style="color: white; background-color: #ff584f">Ort</MudTh>
                <MudTh Style="color: white; background-color: #ff584f">Zeitraum</MudTh>
                <MudTh Style="color: white; background-color: #ff584f">Link</MudTh>
            </HeaderContent>
            <RowTemplate>
                <MudTd DataLabel="Titel">@context.Title</MudTd>
                <MudTd DataLabel="Ort">@context.City</MudTd>
                <MudTd DataLabel="Zeitraum">@context.DateFrom.ToShortDateString() - @context.DateTo.ToShortDateString()</MudTd>
                <MudTd DataLabel="Link"><MudLink Href="@context.Url" Underline="Underline.Always">@context.Url</MudLink></MudTd>
            </RowTemplate>
        </MudTable>

When using it on mobile, the text is not aligned properly:

You can see it live in action: https://ttconftoolblazorwasm.azurewebsites.net/conferences

The code can be found here - if the entire page is of interest: https://github.com/thinktecture/ttconftool-blazor/blob/main/UI/Conferences/Conferences.razor

Thanks!

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 17 (8 by maintainers)

Commits related to this issue

MudTable cell width/alignment fixed #1115 — committed to MudBlazor/MudBlazor by Garderoben 3 years ago

Most upvoted comments

That looks just like it 😄 Thanks.

ChristianWeyer on Mar 8, 2021

@ChristianWeyer Like this maybe? https://try.mudblazor.com/snippet/QawFOHEMTgVSLsDw I will release 5.0.5 and 2.0.5 in about 30-60min to fix that nasty TextField/Input bug on the DatePickers that came with 5.0.4

Garderoben on Mar 8, 2021

Hmm okay, now i can replicate it, i will get back to you little later today, something weird going on here. It refuses to break the links etc but if i put 200 words in there its fine…

Garderoben on Mar 8, 2021

Hmm i will look into it, just a little tip. I notice you changed the primary color in the theme to this Primary = "#ff584f" Instead of setting the color manually with style in the Table Header you can set it with out built in CSS classes, that way your table header will not display wrong primary if it would change.

<HeaderContent>
    <MudTh Class="mud-theme-primary">Titel</MudTh>
    <MudTh Class="mud-theme-primary">Ort</MudTh>
    <MudTh Class="mud-theme-primary">Zeitraum</MudTh>
    <MudTh Class="mud-theme-primary">Link</MudTh>
</HeaderContent>

Garderoben on Mar 7, 2021