starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-03 21:29:20 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

Bug: SidePanel dialog is drawn on top of a regular Dialog in DOM #1815

New Issue
Closed
opened 2026-01-29 17:58:58 +00:00 by claunia · 3 comments
claunia commented 2026-01-29 17:58:58 +00:00
Owner
Copy Link

Originally created by @joriverm on GitHub (Jul 17, 2025).

Describe the bug
when a side panel and dialog are open, the side panel hides the dialog as both elements have the same z-index as they both use the --rz-dialog-zindex css variable, and in the dom the side panel is after the dialog.

To Reproduce
Steps to reproduce the behavior:

  • Open the DialogSide example
  • Give the side panel a width of 50% (, Style = "width:50%")
  • open the panel
  • click open dialog

Expected behavior
i would expect the dialog to have priority over the side panel.

Screenshots

Current :
Image

Expected :

Image

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome
  • Version Latest

Additional context
In our application we open a side panel, do an action on it that opens a dialog.

We have been looking into the issue and discovered that both the side panel and dialog container both share the same z-index from the css variable. this makes it so that browsers will follow the dom to see what element should be on top of what element.
the dialogs are first, so the panel gets drawn on top of the dialog.

we could think of 2 ways to fix this:

  • moving the dialogcontainer in RadzenDialog under the panel so that browsers will always put the dialog on top of the panel
  • introducing a variable to set the panel z-index to a different value than the dialogs (but has the dialog variable as fallback so it doesn't break existing apps). this would mean that apps can still have panels on top of dialogs.

i dont know what you guys think, and im open to make the changes if you can tell me what fix you'd prefer.

Originally created by @joriverm on GitHub (Jul 17, 2025). **Describe the bug** when a side panel and dialog are open, the side panel hides the dialog as both elements have the same z-index as they both use the `--rz-dialog-zindex` css variable, and in the dom the side panel is after the dialog. **To Reproduce** Steps to reproduce the behavior: * Open the DialogSide example * Give the side panel a width of 50% (`, Style = "width:50%"`) * open the panel * click open dialog **Expected behavior** i would expect the dialog to have priority over the side panel. **Screenshots** Current : <img width="1866" height="927" alt="Image" src="https://github.com/user-attachments/assets/725deb9b-f6a8-44a3-bb57-6867322f1131" /> Expected : <img width="1868" height="922" alt="Image" src="https://github.com/user-attachments/assets/c6d6bb4c-dfa9-4cf2-bbd7-4abec1e6ce0e" /> **Desktop (please complete the following information):** - OS: Windows - Browser: Chrome - Version Latest **Additional context** In our application we open a side panel, do an action on it that opens a dialog. We have been looking into the issue and discovered that both the side panel and dialog container both share the same z-index from the css variable. this makes it so that browsers will follow the dom to see what element should be on top of what element. the dialogs are first, so the panel gets drawn on top of the dialog. we could think of 2 ways to fix this: * moving the dialogcontainer in RadzenDialog under the panel so that browsers will always put the dialog on top of the panel * introducing a variable to set the panel z-index to a different value than the dialogs (but has the dialog variable as fallback so it doesn't break existing apps). this would mean that apps can still have panels on top of dialogs. i dont know what you guys think, and im open to make the changes if you can tell me what fix you'd prefer.
claunia commented 2026-01-29 17:58:58 +00:00
Author
Owner
Copy Link

@enchev commented on GitHub (Jul 21, 2025):

This thread might help you:
https://forum.radzen.com/t/dialogservice-confirm-hiding-behind-side-dialog/20538

@enchev commented on GitHub (Jul 21, 2025): This thread might help you: https://forum.radzen.com/t/dialogservice-confirm-hiding-behind-side-dialog/20538
claunia commented 2026-01-29 17:58:59 +00:00
Author
Owner
Copy Link

@joriverm commented on GitHub (Jul 22, 2025):

Hi @enchev ,
thanks for the quick response and fix!
we will implement it on our end by giving the dialog-wrapper a z-index of calc(var(--rz-dialog-zindex) + 1) so its always on top of the panel (which uses --rz-dialog-zindex) !

have you seen the ideas we had on how it could be fixed or changed in a possible better way for all users?

@joriverm commented on GitHub (Jul 22, 2025): Hi @enchev , thanks for the quick response and fix! we will implement it on our end by giving the dialog-wrapper a z-index of `calc(var(--rz-dialog-zindex) + 1)` so its always on top of the panel (which uses --rz-dialog-zindex) ! have you seen the ideas we had on how it could be fixed or changed in a possible better way for all users?
claunia commented 2026-01-29 17:58:59 +00:00
Author
Owner
Copy Link

@enchev commented on GitHub (Oct 3, 2025):

I'm afraid that I don't have other ideas

@enchev commented on GitHub (Oct 3, 2025): I'm afraid that I don't have other ideas
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1815
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?