search

reactjs / react-autocomplete

WAI-ARIA compliant React autocomplete (combobox) component
MIT License
2.17k stars 532 forks source link

Menu is behind other components, not responding to z-order style #282

Closed JamesBender closed 7 years ago

JamesBender commented 7 years ago

Hi,

I'm using the Autocomplete box in an application along with react-bootstrap Rows and Columns for layout. As shown in the picture, the autocomplete menu is hidden behind some of the other page element. I tried using the menuStyle property to pass in a style with the z-index set, but the component doesn't seem to be picking it up.

Thanks, James

image

CMTegner commented 7 years ago

Hi James!

Could you provide a reduced test case, or at least your Autocomplete configuration (props)? Layout-related problems like these are difficult to debug without enough context, but my gut tells me it's probably due to the ordering and z-index values on other elements interfering with each other, and not necessarily a bug in Autocomplete.

JamesBender commented 7 years ago

Hi Christian,

I've attached the render method with the JSX where I'm using the Autocomplete. It's contained in Well component (we wrote) and is being hidden behind some of the rows in the FormList component (which we also wrote). The Row and Col components are from react-bootstrap (https://react-bootstrap.github.io/) and I'm using the Row component from that library in the FormList as well.

Thanks, James

View.txt

CMTegner commented 7 years ago

You need to use camelCased property names in style objects, i.e. "z-index" should be "zIndex".

JamesBender commented 7 years ago

Thanks that worked!