CODEWITHSUNDEEP
blazormudblazor
dhrm
dhrm

Reputation: 14934

Styling of controls inside Toolbar in MudTable

I'm trying to layout a toolbar inside a MudTable with multiple filter controls.

<MudTable Items="@Elements" Hover>
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudSpacer />
        <MudSelect Dense="true" T="string" Label="Coffee" Variant="Variant.Text">
            <MudSelectItem Value="@("Tyrannosaur")" />
            <MudSelectItem Value="@("Triceratops")" />
            <MudSelectItem Value="@("Mike Rex")" />
        </MudSelect>
        <MudTextField @bind-Value="searchString1" Placeholder="Search" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>
    ...
</MudTable>

Toolbar inside MudTable

  1. How can I control the width of the MudSelect? I would like to be a lot smaller fitting to the size of the width of the options.
  2. Why are the two lines inside the MudSelect and MudTextField not aligned?

See this code demo: https://try.mudblazor.com/snippet/cOcGYbcXyjfvdMjQ

Upvotes: 0

Views: 3662

Answers (1)

Tim
Tim

Reputation: 3051

  1. How to Control the Width of MudSelect: You've got a couple options here. You can add a container element around the MudSelect and control the width of that element via CSS (e.g. max-width: 150px) or you can use one of Mud's sizing classes on the MudSelect itself, such as the flex class Class="flex-grow-0", which will prevent the select from growing.
  2. Why the Bottom Borders Aren't Aligned - You're setting margin top to zero on the text input via Class="mt-0". If you remove that, the bottom borders will be aligned.

Upvotes: 2

Related Questions