0

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.

cheny
  • 2,545
  • 1
  • 24
  • 30

1 Answers1

1

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

RBee
  • 1,369
  • 6
  • 16
  • 1
    Great and thanks! It works as a charm. And it turned out that if the MudField is a DateTime? or Select, the position of the description will be too low. Class="d-flex align-end mb-1" makes it perfect then. – cheny Jul 08 '23 at 15:58