Search code examples
c#blazormudblazor

MudBlazor Component Sizing & Layout

In the example code on Mudblazor's website (https://mudblazor.com/components/select#variants) there is no sizing or layout specified, they just line up neatly next to each other. When I implement the code it makes the select boxes 100% of the page width and places them on top of each other instead of next to each other. How would you go about setting the size and layout/placement of the components? I would like the two select boxes side by side and the checkbox and buttons centered.

enter image description here

    <MudSelect T="MailboxUser" Placeholder="Select Forward From Mailbox" Variant="Variant.Outlined" Label="Forward From" @bind-Value="@SelectedForwardFrom" AnchorOrigin="Origin.BottomCenter" Dense="true" FullWidth="false">
        @foreach (var user in SortedUsers)
        {
            <MudSelectItem Value="@user" >@user.DisplayName (@user.PrimarySmtpAddress)</MudSelectItem>
        }
    </MudSelect>

    <MudSelect T="MailboxUser" Placeholder="Select Forward To Mailbox" Variant="Variant.Outlined" Label="Forward To" @bind-Value="@SelectedForwardTo" AnchorOrigin="Origin.BottomCenter" Dense="true" FullWidth="false">
        @foreach (var user in SortedUsers)
        {
            <MudSelectItem Value="@user">@user.DisplayName (@user.PrimarySmtpAddress)</MudSelectItem>
        }
    </MudSelect>
    <MudCheckBox @bind-Checked="@SendToBoth" Color="Color.Primary" Label="Deliver To Both Mailboxes"></MudCheckBox>
    <MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="HandleSetForwardAction">Set Forward</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="HandleRefreshAction">Refresh</MudButton>
Solution

  • I think what you're looking for is a grid for your form inputs.

    In MudBlazor this is the MudGrid. I don't have MudBlazor installed on my travelling machine, so here's some example code I lifted straight from here - https://www.mudblazor.com/components/autocomplete#usage.

    The xs, sm,... control the formatting at different screen widths so you can collapse a row into columns on small screens. You'll need to read up on that.

    <MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="string" Label="US States" @bind-Value="value1" SearchFunc="@Search1"
                         ResetValueOnEmptyText="@resetValueOnEmptyText"
                         CoerceText="@coerceText" CoerceValue="@coerceValue" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="string" Label="US States" @bind-Value="value2" SearchFunc="@Search2"
                         ResetValueOnEmptyText="@resetValueOnEmptyText"
                         CoerceText="@coerceText" CoerceValue="@coerceValue"
                         AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color.Primary" />
    </MudItem>
    <MudItem xs="12" md="12">
        <MudText Class="mb-n3" Typo="Typo.body2">
            <MudChip>@(value1 ?? "Not selected")</MudChip><MudChip>@(value2 ?? "Not selected")</MudChip>
        </MudText>
    </MudItem>
    <MudItem xs="12" md="12" class="flex-column">
        <MudSwitch @bind-Checked="resetValueOnEmptyText" Color="Color.Primary">Reset Value on empty Text</MudSwitch>
        <MudSwitch @bind-Checked="coerceText" Color="Color.Secondary">Coerce Text to Value</MudSwitch>
        <MudSwitch @bind-Checked="coerceValue" Color="Color.Tertiary">Coerce Value to Text (if not found)</MudSwitch>
    </MudItem>
</MudGrid>

    enter image description here