Dropdown Display Issue - List Appearing Behind Other Elements

Ask us anything
1

Hi WeWeb community,

I’m experiencing a display issue with the dropdown menu for task statuses in my project. When I open the dropdown, the list of options appears behind the status of the item below, instead of overlapping and displaying fully in front. This is causing part of the dropdown list to be hidden, as shown in the attached screenshot.

Steps Taken So Far:

  1. I tried adjusting the z-index in the styling options but couldn’t get it to work.
  2. Also checked the overflow settings, but could not find how to make it works.

Request: Does anyone know how to make the dropdown list appear in front of all other elements, so it displays correctly without being hidden by items below? Any advice or guidance would be greatly appreciated!

Thank you!

2

It should just work and perhaps try it out on a blank page or different area without other elements to rule this out.

But obviously somethings up. Check the z-index on all the parent/children div’s as it’s most likely the scope and heirarchy here is causing this somewhere.

Is the dropdown populated with data? Have you tried force showing in editor?

Sometimes I find it easier to inspect in Chrome and change the display property to none on elements to find the cause.

3

Can’t see the image but the z-index should work, without much information I’d assume the z-index is actually not set on the actual right element but I could be wrong. I’ve never had this issue with z-index.