Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: Modal always appears above Drawer #3233

Closed
Chance-fyi opened this issue Oct 15, 2024 · 2 comments
Closed

bug: Modal always appears above Drawer #3233

Chance-fyi opened this issue Oct 15, 2024 · 2 comments

Comments

@Chance-fyi
Copy link

What version of daisyUI are you using?

4.12.13

Which browsers are you seeing the problem on?

Chrome

Reproduction URL

https://play.tailwindcss.com/UEJsJgvLZ0

Describe your issue

I tried to set z-index, but it doesn't work.
@github-actions GitHub Actions
Copy link

Thank you @Chance-fyi for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

@saadeghi
Copy link
Owner

HTML <dialog> element is a top-layer element. it means it's outside of <html> tag so you can't put things from <html> tag on top of it.

To show a drawer sidebar on top of the modal you can use the checkbox method of modal:
https://daisyui.com/components/modal/#method-2-using-a-hidden-checkbox-legacy
Example: https://play.tailwindcss.com/YbG3CtMXVz

Or you can use 2 <dialog> modals, one of them placed on the side (looks like a sidebar)
https://play.tailwindcss.com/DX35O1XGxk

But I would't advice doing this in the first place. It's not a good UX. Modals, popovers, dropdown menus, etc. are unstable parts of design. They get open because of an interaction and get closed with another interaction. It's not a good idea to nest them inside each other because when multiple unstable sections are open inside each other, their behavior would be unpredictable for the user.

Instead, I would suggest using tabs to conditionally show different parts or restructure your UI in a way that wouldn't require opening modals and drawers and dropdowns inside each other.

Let me know if you have a question.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@saadeghi @Chance-fyi