MudBlazor Autocomplete\Select control popup location

Question

My MudSelect popup is displayed too low below the buttons and not below the select control and I cannot effect its location by the AncoreOrigin property.

<MudPaper Class="p-2">
  <MudStack>
    <MudTextField ... />
    <MudSelect T="string" @bind-Value="@Customer.Nationality" Label="Nationality"
       AnchorOrigin="Origin.BottomCenter" ReadOnly="@(!_editCustomerInProgress || Customer.Id == 0)"
       Required="true" RequiredError="Required.">
       @foreach (var country in Countries)
       {
        <MudSelectItem Value="@country" />
       }
     </MudSelect>
     <MudTextField ... />
     <MudTextField ... />
     <MudSelect T="string" @bind-Value="@another_select" ... />
       <MudSelectItem Value=1>xxx</MudSelectItem>
       <MudSelectItem Value=2>yy</MudSelectItem>
       ...
     </MudSelect>
     <MudTextField ... />
     @if (_editCustomerInProgress)
     {
       <div class="d-flex align-center justify-space-between">
         <MudButton Variant="Variant.Filled" Color="Color.Error" Disabled="false" Class="mt-5" OnClick="@(() => OnCancel())">Cancel</MudButton>
         <MudButton OnClick="@(async () => await Submit())" Variant="Variant.Filled" Color="Color.Success" Disabled="false" Class="mt-5 ml-auto">Submit</MudButton>
       </div>
     }
     else
     {
       if (Customer.Id != 0)
       {
         <div>
           <MudButton Variant="Variant.Filled" Color="Color.Info" Disabled="false" Class="mt-5 ml-auto" OnClick="@OnEdit">Edit</MudButton>
         </div>
       }
     }   
</MudStack>

Solution
I put the MudThemeProvider in the MudAppBar by mistake.

Answer 1

You can use TransformOrigin & AnchorOrigin to position your MudSelect component.

There's this nice page setup in the docs to help you play around with the settings.

<MudStack>
    <MudPaper Class="pa-3">Item 1</MudPaper>
    <MudPaper Class="pa-3">Item 2</MudPaper>
    <MudPaper Class="pa-3">Item 3</MudPaper>
    <MudSelect T="string" @bind-Value="@Nationality" Label="Anchor BottomCenter"
       AnchorOrigin="Origin.BottomCenter" 
       Required="true" RequiredError="Required.">
       @foreach (var country in Countries)
       {
        <MudSelectItem Value="@country" T="string"/>
       }
    </MudSelect>
    <MudText Typo="Typo.h6">h6. Heading</MudText>
    <MudText Typo="Typo.subtitle1">subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur</MudText>
    <MudSelect T="string" @bind-Value="@Nationality" Label="Anchor CenterCenter & Transform TopCenter"
       AnchorOrigin="Origin.CenterCenter" 
       TransformOrigin="Origin.TopCenter"
       Required="true" RequiredError="Required.">
       @foreach (var country in Countries)
       {
        <MudSelectItem Value="@country" T="string"/>
       }
    </MudSelect>
</MudStack>

@code{
    List<string> Countries = new(){"Country A","Country B","Country C"};
    string Nationality;
}

Demo MudBlazor Snippet

And if that isn't enough then you can override specific CSS classes, for example in this answer.