mudblazor

How to show MudOverlay over a MudDialog?

So I have this component (let's call it MyComponent) which uses a MudOverlay to act as a backdrop in order to dismiss a MudPopover which is shown upon right clicking MyComponent.

It's all working great except when I am including MyComponent in a MudDialog; the MudOverlay is shown underneath the MudDialog component, even though I set a high Z-Index.

How can I show a MudOverlay above a MudDialog ?

Dialog code:

<MudDialog>
    <DialogContent>
        <MyComponent/>
    </DialogContent>
</MudDialog>

MyComponent code:

<div>
    <MudOverlay ZIndex="99999" Visible="true" Style="background-color: aqua; z-index: 1000; padding: 20px" AutoClose="true" />
    <div style="background-color: blue; padding: 20px; width: 400px; height: 40px; margin-inline: auto">

    </div>
</div>

Result:

enter image description here Thanks a lot for any help with this

Solution

  • The z-index for the overlay was being assigned twice. Once in MudOverlay.ZIndex and the other in MudOverlay.Style.

    Removing the MudOverlay.Style's one fixes the issue.

    <div>
    <MudOverlay ZIndex="9999" Visible="true" 
        Style="background-color: aqua; padding: 20px" 
        AutoClose="true"/>
    <div style="background-color: blue; padding: 20px; width: 400px; height: 40px; margin-inline: auto">

    </div>
</div>

    Snippet