React-select: Z-Index Problems?

[bradennapier]

I had this problem with a default install of react-select ? I can't seem to figure it out, I have spent hours on this. It appears near impossible to get the dropdown to be above everything... perhaps some sort of portal solution should be used for this ?

[ufukomer]

+1

[theopolisme]

We fixed this (temporarily, hopefully!) by manually setting a higher index on the Select-menu-outer div.

.Select-menu-outer {
  z-index: 999 !important;
}

[bradennapier]

This doesnt work for me because I have items in another stacking context which will go over the other divs. A portal solution is needed otherwise it is impossible to guarantee the results of the dropdown not being affected by the other styles.

[benjiwheeler]

+1 same problem, jQueryUI elements showing up on top

[Augustin82]

I came looking for an answer to that.
Found it there, putting it here in case others like me stop at this issue and don't see the other one ;)
https://github.com/JedWatson/react-select/issues/1076#issuecomment-253629943

[evgeniiteterin]

anyone solved this problem? menuContainerStyle={{ zIndex: 5 }} not work.

[mduleone]

:+1: having this issue as well. Neither the suggested Select api

<Select {...props} menuContainerStyle={{'zIndex': 999}} />

nor the css

.Select-menu-outer {
    z-index: 999 !important;
}

worked. Any thoughts would be great!

[turnerniles]

See prateekjahead's comment: https://github.com/JedWatson/react-select/issues/1010
"HubSpot's react-select-plus takes in dropdownComponent as a prop which solves the issue."

[prototypos]

z-Index did not work for me because I have jQueryUI items. When I set the opacity to 0.99 of the element that contained these items, the dropdown appears in the front.

[NatashaKSS]

I've also tried setting z-index: 999 !important on the div with the .Select-menu-outer class and on subsequent parent divs, but it still doesn't work

[turnerniles]

@NatashaKSS Have you tried react-select-plus with the same css?

[JedWatson]

If anybody can isolate why it works with react-select-plus I'd be very happy to port the fix back upstream :+1:

The explanation on #1010 about being inside a parent element with certain styles applied sounds like it may be the culprit, in which case injecting the menu into the body would be a potential fix, but I'm pretty sure that causes other unexpected behaviours with positioning.

Alternatively if someone can point me at an example I can hack that replicates the issue either @jossmac or I can take a look!

[bartekwitczak]

Hey,

I also had an issue with z-index and components not properly displaying. Walking through the code I've noticed that LESS & SCSS versions of variables have different values:

https://github.com/JedWatson/react-select/blob/master/less/select.less#L32
https://github.com/JedWatson/react-select/blob/master/scss/select.scss#L29

I don't know if that is by design or not, @JedWatson? In case of LESS z-index value is set to 1 and in case of SCSS it's set to 1000 !default.

Please remember how z-index really works and z-index is not global for whole site. You should take care of proper nesting in order to work as required. If you need any good explanation, take a look here https://css-tricks.com/almanac/properties/z/z-index/

eat broccoli & workout,

[notten13]

Hey,

I ran into some some issues with the stacking context as well and I managed to fix them by changing the z-index of open Select elements:
.Select.is-open { position: relative; z-index: 1000; }

I don't know if this is the best solution but I hope it can help :)

[mdcorriveau]

Hi,

Anyone has fixed this problem ? I've tried every solution i've seen but still no results. I've also tried react-select-plus without any results.

Thanks

[LinuCC]

If you use an animations-lib (e.g. GSAP) it is possible that it adds transform to the style attribute of the node in which you use react-select.
As long as that attribute is set setting z-index will not work.
In that case you need to remove the transform after your animation is done (Some animation libs support that).

[schuchowsky]

@bartekwitczak Thanks for your tip!

A bit of reviewing how z-index works and I could solve my problem with this. I'd suggest everyone reading https://css-tricks.com/almanac/properties/z/z-index/

Basically what I needed to do is to set the z-index higher on the parent component, who contained the select, not the select itself. Because it's z-index needed to be greater than his elements "brothers".

[mcha-dev]

this worked for me

.Select-menu {
    position: fixed !important;
}

then I had to give fixed width to both the input and the dropdown, here is the css I changed:

.Select {
    width: 444px !important;
    margin-right: 5px;
    z-index: 0 !important;
}

.Select.is-open {
    z-index: 1 !important;
}

.Select-menu {
    position: fixed !important;
    width: 440px !important;
    margin: 1px;
}

[DavidDionise]

My problem was that my select box was the child of an element that was using a transformation (Animate.css to be exact), and that creates a new stack context. Once I got rid of that, react-select played nicely with it's DOM siblings.
There are work-arounds for dealing with z-index issues with transformations. Check out this article for some slick css tips.

[agirton]

Since there are quite a few answers that handles this, closing this out.

[bradennapier]

Running into this problem again. I think the main solution is to have the dropdown render itself in a portal-like context. This would resolve any issues with z-index with the dropdown. In almost all cases I can imagine this is desired effect. Perhaps in the minimum as a prop?

[nreese]

@JedWatson Any way that the dropdown could be rendered with https://reactjs.org/docs/portals.html to avoid overflow problems hiding menu?

[VD17593]

Had a similar problem: two mdl-cards (div) one below the other, with each a select inside.
When opening the select in the upper card, the dropdown appeared below the lower card, even is I changed the z-index on the select.
As work around, I had to give the two mdl-cards (outer div) a different z-index : the first one a higher z-index than the next.

[zhm12359]

.Select-menu-outer {
z-index: 1000;
position:relative;
}

solved my problem. I am using this as a column in react bootstrap table.

[Slapbox]

Oh my lord, @schuchowsky your solution works! I had all but given up hope! This is still an issue for overlapping other elements that require the same z-index unfortunately, but very close now.

[adamsenn]

For anyone late to this thread (like me), I solved a similar issue in 2.0 using the https://react-select.com/styles prop:

const reactSelectStyles = base => ({ ...base, zIndex: 999 })

and

return <Select styles={reactSelectStyles} />

[cancit]

I solved with jss.
works for the example here

const styles = theme =>
  createStyles({
    root: {
        flexGrow: 1,
        height: 250,
        '& div':{
            zIndex:1
        }
      },
})

 <div className={classes.root}>
        <Select
          classes={classes}
          textFieldProps={{
            label: "Filter",
            InputLabelProps: {
              shrink: true
            }
          }}
          options={suggestions}
          components={components}
          value={this.state.multi}
          onChange={this.handleChange("multi")}
          placeholder="Select multiple countries"
          isMulti
        />
      </div>

[lucasfcosta]

Hey everyone, I've been reading the solutions posted here and even though they might work for you each case is a bit different, so instead of giving a code snippet to copy and paste this is how you understand and then solve this problem.

Why it happens

This happens because your selector comes before the element overriding it in the DOM and therefore the element that comes after it will appear on the top unless you use z-index to tell the browser that the element containing react-select should appear on top.

How to solve it

z-index only works for elements that don't have position: static (which is the default) so you have to set a position of relative in the element that contains react-select and set z-index to any value bigger than the component that comes after it.

If that still doesn't work check the component that comes after the one with react-select to see if it's z-index is bigger and its position.

I hope this helps.

[cescoferraro]

This works for me

const Menu = (props) => {
  return (
    <div style={{ position: "fixed", width: "300px" }} >
      <components.Menu {...props} >
        {props.children}
      </components.Menu>
    </div>
  )
}

    <Select
      components={{ Option: CustomOption, Menu }}
      className={props.classes.select}
      value={currentClub}
      onChange={(option) => {
        props.actions.dispatch({ type: UNSET_PARTIES_LOADED })
        props.actions.club({ token: props.auth.userclub.token, id: option.value })
      }}
      options={allClubs}
    />

[galabra]

This CSS snippet made it work for me:
.Select:not(.is-open) { z-index: 0; }

[strap8]

This worked for me.
styles={selectStyles}
....
/>

const selectStyles = {
  container: (base, state) => ({
    ...base,
    opacity: state.isDisabled ? ".5" : "1",
    backgroundColor: "transparent",
    zIndex: "999"
  })
};

[jossmac]

@lucasfcosta explained part of the issue (cheers mate!) but there's more at play here. If your select is inside of an element with a lower "stacking context" than whatever's over the top of it, no matter how high you set the z-index it won't matter -- it'll never escape its stacking context.

MDN have a great page explaining the stacking context; please check it out.

[alecmolloy]

Very surprised to not see this mentioned, but a 2.0 feature solves all of this elegantly with React Portals. All you need to do is add a portal div (i just put it outside my react root) and reference it in your Select control:

menuPortalTarget={document.getElementById('portal-target')}

For more on understanding React Portals: https://reactjs.org/docs/portals.html

PR for react Portals: https://github.com/JedWatson/react-select/pull/2439

(Perhaps this would be good to put into the docs? This is a pretty great solution to a clearly common problem.)

[derekcannon]

@alecmolloy Thanks, your solution was helpful. For anyone having issues with thing still showing through the popup (for me it was Material UI TextField labels), you can explicitly set the zIndex of the portal using the menuPortal key:

<Select
  menuPortalTarget={document.getElementById('portal-target')}
  styles={{ menuPortal: styles => ({ ...styles, zIndex: 1000 }) }}
  {...yourOtherProps}
/>

[d3mp]

@strap8, thanks! Your suggestion works but it has a disadvantage, if you have under your first select another select, it won't be overlaid.

Solution is to use menu instead of container:

const selectStyles = { menu: styles => ({ ...styles, zIndex: 999 }) };

[kudarap]

already solved on v2 https://react-select.com/advanced#portaling

[erfoon]

Mine was solved using this comment:

https://github.com/JedWatson/react-select/issues/404#issuecomment-433608100

[colidarity]

Fixed this temporarily by using

3230 > span ~ div:nth-of-type(2) {

z-index: 999 !important;

}

[AndreyZavarin]

Сheck overflow-y at parent elements.
overflow-y: auto -> overflow-y: initial

[selensr]

Yes, check parents overflow if it's hidden delete it, then make select is-open overflow visible. Don't use z-index if it's not necessary, it causes problems when you scroll

[1nfility]

styles={{ container: (base) => ({ ...base, zIndex: 500 }) }}

[timaivanov]

For me work this
styles={{
// Fixes the overlapping problem of the component
menu: provided => ({ ...provided, zIndex: 9999 })
}}
value={selectedOption}
onChange={evt => onSelectChange(evt, index)}
options={options}
/>

[glenkitchen]

This worked for me ,
styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}

As per example in documentation
https://react-select.com/advanced#portaling

[JeffEmery]

Using the example breaks isMenuOpen={true}
When you add menuPortalTarget={document.body}, you can no longer render the Select with the Menu open.

[shahedmahmoudi]

This worked for me ,

styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
              menuPortalTarget={document.body}     //important

As per example in documentation
https://react-select.com/advanced#portaling

[Nicolas-Medina-Teracode]

For me work this
styles={{
// Fixes the overlapping problem of the component
menu: provided => ({ ...provided, zIndex: 9999 })
}}
value={selectedOption}
onChange={evt => onSelectChange(evt, index)}
options={options}
/>

This one works best for server-side rendering, the solutions that use document.body don't work with SSR. Thanks!

[jaketrimble]

react-select: 1.0.0-rc.5

*scss*

:global(.Select-menu-outer) {
   z-index: 999 !important;
 }

[mathiaswillburger]

This worked for me ,

styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
              menuPortalTarget={document.body}     //important

As per example in documentation
https://react-select.com/advanced#portaling

@shahedmahmoudi your solution fixed it also for me, where react-select is used with react-bootstrap-table2 and was hidden behind some header and footer elements. Thx!

[xXDeonoXx]

This worked for me ,

styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
menuPortalTarget={document.body} //important
As per example in documentation
https://react-select.com/advanced#portaling

i just had to add a negative marginTop, somehow the dropdown showed down bellow it should

[er-parag91]

This fixes for me

Define following style object and change menu dropdown z index

  const customStyles = {
    menu: (base) => ({
      ...base,
      zIndex: '5',
    }),
  };

  <Select
     styles={customStyles}
     { ...other props }
   />

[markcunninghamuk]

this worked for me (Embedded in Dynamics 365 form)

 const selectStyles = { menuPortal: (zzz: any) => ({ ...zzz, zIndex: 9999}) };

    return (            
        <AsyncSelect
        isMulti={true}
        menuPortalTarget={document.body}
        styles={selectStyles}
        loadOptions={this.loadOptions}
        defaultOptions
        onChange={this.onChange}        
        />
    );

[afrancht]

@shahedmahmoudi solution worked for me! If you have access to 'document' in the browser.