I am new with Mudblazor and foud issue.
When I place the select control in a certain control hierarchy the dropdown no longer appears. I created a MudBlazor playgroud to explain my case.
https://try.mudblazor.com/snippet/GaGeYBbmhSOxGDNF (Flat example pop-up show under the appbar)
https://try.mudblazor.com/snippet/mOwekhFQhRKyvPfO (With fake link, where links hide pop-up)
Thanks
You'd need to override the default z-index. One option is to use the PopoverClass
property on the MudSelect
and give it a higher z-index.
<MudAppBar>
<MudSpacer />
<MudMenu Icon="@Icons.Material.Outlined.Person">
<MudStack>
<MudSelect T="CultureInfo" Label="Culture" PopoverClass="select-popover">
@foreach (var culture in _cultures)
{
<MudSelectItem Value="culture" />
}
</MudSelect>
<MudLink Href="">Lien 1</MudLink>
<MudLink Href="">Lien 2</MudLink>
<MudLink Href="">Lien 3</MudLink>
<MudLink Href="">Lien 4</MudLink>
<MudLink Href="">Lien 5</MudLink>
<MudLink Href="">Lien 6</MudLink>
<MudLink Href="">Lien 7</MudLink>
<MudLink Href="">Lien 8</MudLink>
<MudLink Href="">Lien 9</MudLink>
</MudStack>
</MudMenu>
</MudAppBar>
@code {
@using System.Globalization;
private CultureInfo[] _cultures = [new CultureInfo("en-US"), new CultureInfo("fr-CA")];
}
<style>
.select-popover {
z-index: 1500 !important;
}
</style>