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:

Thanks a lot for any help with this

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:

Thanks a lot for any help with this

• mudblazor

• It's working as expected here You may have other issues in your code. Have you included all the Mud service components in MainLayou.razor? i.e. MudPopoverProvider – RBee Commented Feb 15 at 17:27
• Thanks for your input, it is not what I am trying to achieve though. The behavior I am after is to have the overlay shown over the dialog and not underneath the dialog. – Toto Commented Feb 15 at 18:25
• Like this? – RBee Commented Feb 15 at 19:24
• Not exactly, I want the overlay to take the full screen – Toto Commented Feb 15 at 20:38
• Like this fully covering the dialog? – RBee Commented Feb 15 at 23:22

1 Answer 1

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