Search code examples
cssblazor-server-sidemudblazor

Mudblazor - MudTable not able to align ToolbarContent

I've been try to make some minor tweaks to the Toolbarcontent inside of a Mudtable without success. I recuced the size of the default MudTextField but I can't seem to find a way to align it to the right.

I also have a very light border around the toolbarcontent that I would like to remove but haven't found that setting either.

I found some posts that suggested using the "flex" box to do alignment but none of the examples I found dealt with it inside of the toolbarcontent. Any suggestions on what I need to do to get the TextField to be aligned to the right and/or how I can get rid of the outline around the toolbar?

 <MudTable Items="@listApplications" Dense="true" Hover="true" Bordered="true" Striped="true" CustomHeader="true" HeaderClass="mud-table-header"
            Filter="new Func<UsersAdminApp,bool>(FilterFunc1)" @bind-SelectedItem="selectedApplication">
        <ToolBarContent>
            <MudSpacer />
            <MudSpacer />
            <MudTextField @bind-Value="searchString" Placeholder="Search for Application" Immediate="true" DebounceInterval="2" Clearable="true" Style="width: 300px;"
                Variant="Variant.Outlined" Margin="Margin.Dense"
                Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0 flex-right"></MudTextField>
        </ToolBarContent>

enter image description here

Solution

  • Your width style has styled the border however, the container is still it's original width. See image below for what the width of the input container actually is. flexbox

    Since the parent of that input is also a flexbox that means that you can align the input using the align-self CSS property. Specifically for your use-case align-self: end;

    <ToolBarContent>
    <MudTextField  @bind-Value="searchString" 
        Style="width: 300px;align-self:end;"
        Placeholder="Search for Application" Immediate="true" DebounceInterval="2" Clearable="true" 
        Variant="Variant.Outlined" Margin="Margin.Dense"
        Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium"  Class="mt-0 flex-right"></MudTextField>
</ToolBarContent>

    Another small tip is that you only need to use a MudSpacer if there are other components that you wish to place opposite to eachother.

    MudBlazor Snippet