search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.13k stars 1.3k forks source link

bug: Modal always appears above Drawer #3233

Closed Chance-fyi closed 1 month ago

Chance-fyi commented 1 month ago

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[bot] commented 1 month ago

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 commented 1 month ago

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.