Listbox overlays another Listbox

[filip-lebiecki]

Hello,

I'm trying to build a very simple component that consists of few Listbox's one under/below the other.

<div>
<Listbox>
</Listbox>
<Listbox>
</Listbox>
</div>

When I open the top Listbox the popup with items/options is being display under/behind the second Listbox element.
I've tried adding "z-.." without success. I would want the popup to overlay everything there is (be displayed on top).
Any suggestions? Thanks!

[filip-lebiecki]

[mauricior]

@filip-lebiecki did you solve your problem?

I'm facing a similar problem with dropdown menus:

[mauricior]

To everyone that find this problem, just add z-index: 1 property in your css at the body items component.

If that doesn't work try to increase the number of z-index.

"The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order."

@filip-lebiecki for me that solved the problem.

[fraser148]

Came across this issue today.

I found that adding z-10 (or higher if required) to the <Listbox.Options> component solves this issue for me.

This modified the Headless UI Docs example.

[AlexMachin1997]

Hmm how odd I've tried this and many other solutions in my project I'm still experiencing this issue (See image).

Although mine isn't two Listboxes but it's an issue with the RadioGroup component.

[leonceaklin]

Try to give the whole parent (container with the drop shadow) a higher z-index. And give the box below a lower z-index. Had a similar use case and it worked for me.

[AlexMachin1997]

Ah that seemed to do the trick, I'll have to remember that one for next time.

I knew it was z-index based but wasn't entirely sure where exactly it needed to go as sometimes it appeared other times it didn't.

Cheers @leonceaklin 🥳

[leonceaklin]

I'm having this issue with Vue and none of the solutions provided work for me. Did somebody have success solving this in headlessui Vue?

[vesper8]

I believe this is a very hard issue to fix.. it has to do with the order in which you generate your listboxes, since the items are a child of the trigger and you can only apply z-index that will be respected to the parent trigger element, you will always run into a problem if you place a listbox with a lower z-index value underneath a listbox with a higher value.

After much pain, I was able to overcome the issue by adding an emitter to my dropdown component that makes the parent component apply a higher z-index value to the dropdown that is currently activated and a lower value to all other dropdowns.

[annavandrews]

I'm trying to set this up on mine but having issues with the fact I have multiple dropdowns and if I don't click on the menu button to close the menu it doesn't work quite as expected - for example if a menu is open and I click another menu button it doesn't "unclick" the first menu button. Do you have an example of how you set this up for your problem? It might help me with mine, thank you!

[mnlfischer]

The problem here is position: relative. You need to use it as an anchor for the Listbox.Options. It creates always a new stacking index.