Dropdown is covered by other elements

[ShawnRoller]

Hi, I like the simplicity of using this library. I'm using this in a react-native-web project.

When I expand the options, the other elements below the options are rendered on top of the option list. I have tried setting the z-index on optionContainer but it seems to have no effect.

The workaround is for me to set a zIndex on all of my dropdowns manually, which is not ideal.

I would like to see a solution for overriding the CSS to explicitly set the z-index so that the optionContainer always appears over other elements when it is expanded.

Thanks!

.

[njaouen]

Hey. I have a similar issue, and I am also interested by a fix for this. In the meantime, would you mind sharing an example of how you have set your zIndex ? Thanks for sharing.

[ShawnRoller]

I had to set the zIndex of the view that contains the dropdown, and it is very hacky.

{fieldContainers.map((field, index) => ( <View style={{ zIndex: 999 - index }}><Dropdown… /></View> )

Hope that helps.

[njaouen]

I had to set the zIndex of the view that contains the dropdown, and it is very hacky.

{fieldContainers.map((field, index) => ( <View style={{ zIndex: 999 - index }}><Dropdown… /></View> )

Hope that helps.

Thanks !

[srigar]

Seems not reproduceable in browser, will check in react-native.

[DustinsCode]

Also having this issue in NextJS. Tried adding a z-index to the optionListContainer class and had no success.

[HastiSutaria]

Having the same issue. Adding z-index to "optionListContainer" class in styles prop don't work.