Troubleshooting Dropdown List Issues in Webflow with z-index | Relume Community

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

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... 😞
Matt J.
·
Dylan H. I havent checked yet but can you make the change and publish if you havent already?
Dylan H.
·
I have published 👍🏼
Matt J.
·
ah okay - so it must have fixed it for me in webflow but not the published site - leading again to finsweet attributes being the issue - taking a look
Matt J.
·
Can you replace that CSS code I gave you with this one instead? Its very hard to troubleshoot these things when its Finsweet Attributes because you need to publish.
.dropdown_list.w--open { z-index: 1 !important; }
Dylan H.
·
It didn't fix it. I removed finsweet attributes now.
Dylan H.
·
Read-only
Dylan H.
·
Really appreciate you taking a look!
Matt J.
·
Dylan H. okay - well when I inspect the code - adding the z-index: 1 important; worked - the !important is critical here because it'll override any other property that might be setting it.
Matt J.
·
this was on the published URL
Dylan H.
·
Okay got it to work now by adding it to the global styles! Thanks Matt - really appreciate it.
Dylan H.
·
Also, how wide is your screen? 🤣
Matt J.
·
haha apple studio display 🫣 - I have my browser set to 4/5th the full screen with my todo list taking up the last 5th.
Miles A.
·
I’m struggling with a similar issue with a dropdown. Tried the method mentioned above, but didnt seem to fix it. Any other thoughts on what I’m missing here? https://preview.webflow.com/preview/frank-anderson-md?utm_medium=preview_link&utm_sour[…]&pageId=65e89fff9fa5d735c712af1e&locale=en&workflow=preview
Matt J.
·
Miles A. looks like if you reset/remove all other instances of z-index from all the elements where you were trying to troubleshoot - and just add it to the class I'm pointing to here, you should be good.
Miles A.
·
That did it! Thanks Matt J.