mudblazormudselect

MudBlazor Select popup not display


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


Solution

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