MudBlazor Select popup not display

Question

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

Answer 1

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.

executable example

<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>