Search code examples
flexboxblazormudblazor

Mudblazor not able to justify items, one to the left and one to the right

I’ve looked through all of the “Justify Content” section of the Mudblazor docs but I’m just not getting it. I have two buttons that sit above a MudTable. I want one button to be all the way to the left and the other all the way to the right. I’ve tried a couple versions but based on the docs this is what I came up with but it’s not working. See picture.

I’m also going to need to do the same thing inside of my MudTable’s ToolBarContent section. There I want to have a badge to the far left and the Search textbox to the far right. I figure I can apply the same code in the ToolBarContent section as I can for the button above my MudTable.

enter image description here

<div class="d-flex justify-space-between flex-grow-1 gap-4">
    <MudButton Variant=" Variant.Filled" StartIcon="@Icons.Material.Outlined.EditNote"
               Size="Size.Small" Class="ml-auto">Item Count</MudButton>

    <MudButton Variant=" Variant.Filled" StartIcon="@Icons.Material.Outlined.EditNote"
               Size="Size.Small" Class="ml-auto">View History</MudButton>
</div>


<MudTable Items="@list" Dense="true" Hover="true" Bordered="true" Striped="true" CustomHeader="true" HeaderClass="mud-table-header"
          Filter="new Func<Dependent,bool>(FilterFunc1)" @bind-SelectedItem="selectedDependent">
    <ToolBarContent>
        <MudTextField @bind-Value="searchString" Placeholder="Search Last Name" Immediate="true" DebounceInterval="2" Clearable="true" Style="width: 300px;align-self:end"
                      Variant="Variant.Outlined" Margin="Margin.Dense"
                      Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
    </ToolBarContent>

UPDATE

<MudGrid Width="100%">
    <MudItem Width="50%">
        <MudButton Variant=" Variant.Filled" StartIcon="@Icons.Material.Outlined.EditNote"
                   Size="Size.Small" Class="ml-auto">Item Count</MudButton>
    </MudItem>
    <MudItem Width="50%">
        <MudButton Variant=" Variant.Filled" StartIcon="@Icons.Material.Outlined.EditNote"
                   Size="Size.Small" Class="ml-auto">View History</MudButton>
    </MudItem>
</MudGrid>
Solution

  • You're very close with your original snippet. The ml-auto on your buttons is pushing them to the right. Remove those classes and you should be fine.

    <div class="d-flex justify-space-between"> 
  <MudButton 
    Variant="Variant.Filled" 
    StartIcon="@Icons.Material.Outlined.EditNote"
    Size="Size.Small">
    Item Count
  </MudButton>

  <MudButton 
    Variant="Variant.Filled" 
    StartIcon="@Icons.Material.Outlined.EditNote"
    Size="Size.Small">
    View History
  </MudButton>
</div>

    I have also simplified the classes on the container.

    The flex-grow-1 class is redundant, unless the container itself is a flex item.

    The gap-4 class only has an effect when the buttons are adjacent - which will only happen on extremely narrow viewports.

    Working example: https://try.mudblazor.com/snippet/mOGRlclKGKfRGqNs

    Edit

    An alternative approach without using justify is to apply ml-auto to your right button. The left button will naturally want to stick to the left of the container, and the right button will be pushed as far right as possible by the margin.

    <div class="d-flex"> 
  <MudButton 
    Variant="Variant.Filled" 
    StartIcon="@Icons.Material.Outlined.EditNote"
    Size="Size.Small">
    Item Count
  </MudButton>

  <MudButton 
    Variant="Variant.Filled" 
    StartIcon="@Icons.Material.Outlined.EditNote"
    Size="Size.Small"
    class="ml-auto">
    View History
  </MudButton>
</div>

    The downside with this alternative approach is that it only works when you want to push the right-most item to the end - i.e. it is an alternative to flexbox justify-* only when n = 2.

    Learning and using the different flexbox container properties is arguably a better approach in general, although there's nothing wrong with using the ml-auto trick when you have this kind of layout.

    Updated example: https://try.mudblazor.com/snippet/ckcHPGPKwKCsPyNK