Search code examples
cssmudblazor

Align button to right side in div

I have below markup

div class="d-flex flex-column">
<MudText Typo="Typo.h1" class="mb-2">Employees</MudText>
<MudItem  >
    <MudButton Variant="Variant.Outlined" Color="Color.Secondary" style ="float:right" >CreateNew</MudButton>
</MudItem>
<MudPaper class="d-flex flex-column h-100" style="min-height: 0;">
    <MyForm/>
    <div class="d-flex h-100" style="min-height: 0;">
        <MudTable Items="Items" FixedHeader="true" Height="100%" Style="width: 100%; height: calc(100% - 52px);"
                  MultiSelection="true" SelectOnRowClick="false">
            <HeaderContent>
                <MudTh>Length</MudTh>
                <MudTh>Age</MudTh>
            </HeaderContent>
            <RowTemplate>                   
                <MudTd DataLabel="StartIndex">2</MudTd>
                <MudTd DataLabel="Length">2</MudTd>
                <MudTd DataLabel="Edit">
                    <MudIconButton Icon="@Icons.Material.Filled.Edit" aria-label="edit" ></MudIconButton>
                    <MudIconButton Icon="@Icons.Material.Filled.Delete" aria-label="delete"></MudIconButton>
                </MudTd>
            </RowTemplate>
        </MudTable>

    </div>
</MudPaper>

I want CreateNew button to be on right side of text Employees and to the extreme right enter image description here

Solution

  • May be you can try:

    <div class="d-flex align-items-center justify-content-between">
    <MudText Typo="Typo.h1" class="mb-2">Employees</MudText>
    <MudItem  >
        <MudButton Variant="Variant.Outlined" Color="Color.Secondary">CreateNew</MudButton>
    </MudItem>
</div>