Search code examples
mudblazor

MudBlazor class align-content-end not working


I'm trying to build a form with descriptions after every fields.

I want it to be like this:

Label
Values here Descriptions here


But it looks like this now:

Label Descriptions here
Values here


I found something about class align-content-end here:https://www.mudblazor.com/utilities/align-content#basic-usage-end But seems it doesn't work in MudGrid and MudItems.

Here is my code:

<MudGrid Style="width: 100%;">
    <MudItem xs="12" md="3">
        <MudTextField Disabled For="@(() => Model!.Id)" @bind-Value="Model!.Id" Label="@Localizer["Id"]" ReadOnly="true"
                      Margin="Margin.Dense"/>
    </MudItem>
    <MudItem xs="12" md="9" Class="align-content-end">
        <MudText Color="Color.Surface" Style="vertical-align: bottom;">
            <small>Descriptions</small>
        </MudText>
    </MudItem>

Any help? thanks.


Solution

  • Turn the MudItem to a flex and align-items:end == d-flex align-end

    <MudItem xs="12" md="9" Class="d-flex align-end">
        <MudText Color="Color.Surface">
            <small>Descriptions</small>
        </MudText>
    </MudItem>
    

    Snippet