Troubleshooting Dropdown List Issues in Webflow with z-index

·

Hi, would anyone know why the dropdown list goes behind the next dropdown? I've tried everything with z-index, filters, etc. Originally i thought it was Finsweets Multi Select attribute solution, when I removed that it started to work on the live site but not Webflow.

30 comments

· Sorted by Oldest

Bas v.
·
you sure you applied a z-index to the dropdown element itself (and not the dropdown_toggle or dropdown_list)?
Dylan H.
·
I've tried applying z-index to everything, it's strange that it works on the front end (until I add finsweet's dropdown select script, I assume this is because it loads the dropdowns after which affect z-index?)
Dylan H.
·
https://manithawani.webflow.io/
Bas v.
·
I think it’s still something on your end though. We have two finsweet dropdown on https://stotlesnew.webflow.io/reports-new/public-sector-cyber-security (password keyfob) as well, and they work as expected
Dylan H.
·
So strange, read-only link incase anyone is interested: https://preview.webflow.com/preview/manithawani?utm_medium=preview_link&utm_source=des[…]i&preview=361843a095f6dc3bb4cf5c9942c1dd82&workflow=preview
Bas v.
·
it’s not haha, you need to apply a z-index on the dropdown element
Bas v.
·
either just set it to 0 or 1
Dylan H.
·
Dylan H.
·
It's still covered by the next dropdown
Bas v.
·
I see. I don’t know, it’s weird. Might be a new bug? I can’t remember this happening in the past. It also happens in my own project now
Matt J.
·
Dylan H. it looks like its a webflow bug yeah - webflow is adding a z-index: 900; to .w-dropdown which is the main wrapper for the dropdown. Ultimately there's really no reason for a z-index here at all because anything you do, will just continue to overlap each other because they all share the same classes so we just need to add this CSS to overwrite what Webflow is doing - for what reason, I am not sure.
.w-dropdown { z-index: 0 !important; }
Matt J.
·
I guess once you implement this, I would do some extensive testing on as well.
Matt J.
·
(browsers, devices, etc)
Matt J.
·
as I am sure a vet like yourself will do but just wanted to call it out anyway! 💪
Dylan H.
·
Hey Matt, thanks for chipping in! But unfortunately, it didn't work... 😞