CODEWITHSUNDEEP
mudblazor
Toto
Toto

Reputation: 972

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

Upvotes: 0

Views: 43

Answers (1)

RBee
RBee

Reputation: 4967

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

Upvotes: 1

Related Questions