search

tailwindlabs / tailwindui-issues

A place to report bugs discovered in Tailwind UI.
236 stars 4 forks source link

Dropdown z index #25

Closed dillingham closed 4 years ago

dillingham commented 4 years ago

What component (if applicable)

Describe the bug When you copy a component with a dropdown.. The menu needs a z-10 in order to not appear behind other elements.

epixian commented 4 years ago

In addition to putting z-10 on the dropdown menu element, I also had to move the z-0 from the parent <span> and put it on each of the <button>s. Seems to fix the issue.

thomasweitzel commented 4 years ago

I stumbled across the same problem with the application shell (stacked layout) where I put a banner beneath the nav-bar: the menu with the transition from the nav-bar was behind the banner until I put a z-10 on it (<div x-show="open" x-transition:enter= ... class="... z-10"). This problem seems to exist in various locations.

dakira commented 4 years ago

Also related #130.

jasonlbeggs commented 4 years ago

z-indexes are pretty context specific, so we try to not use them much more than necessary in Tailwind UI. It's probably best to just add them where necessary inside your own sites/apps unless it's an issue that will definitely be present in all cases. Thanks for submitting!

shanerobinson commented 4 years ago

While I agree z-index can be context specific, the Profile dropdown in the Application > Navbars will ALWAYS need a z-index: https://tailwindui.com/components/application-ui/navigation/navbars

I've added them for our use case but would be nice if the UI templates were updated for use in quick demos and boilerplates going forward.