React-select: Imposible to display drodown over parent component

[o9ilz]

Its impossible to display dropdown menu over parent gif, The only way is to set poistion to relative and z-index, but this will cause moving component over parent div therefore for example borders will not be correctly shown

[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."

[bartekwitczak]

Hey,

take a look at my comment here: https://github.com/JedWatson/react-select/issues/1085

I also had a problem with displaying select dropdown on top of my other component - in that case that was navigation bar. The problem was connected to z-index value equal to 1 taken from LESS, where in SCSS it's set to 1000.

You should also check what CSS position values are set for your components and remember about how z-index works with nesting.

eat broccoli & workout,

[hutchy2570]

I worked around this by adding the following to my css/less:

.Select {
    z-index: 0;
}

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

Just adjust your relative z-indexes accordingly.

[mcha-dev]

^ didn't fix it, so I added:

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

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

.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;
}

[nicswayne]

z-index didn't work for me. Just had to add a background color.

fixed it with:

.Select-menu, .Select-menu:hover {
    position: fixed;
    background: white;
}

[pawlowskim]

// Fix case when drop down menu is rendered under the other elements
.Select-menu-outer {
    z-index: 1000 !important;
}

This worked for me

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.

[MenachemICTBIT]

After seeing the half dozen related issues, yet not finding a resolution, I have found one.

<Select menuPortalTarget={document.body} menuPosition={'fixed'} />

Add these two options to your Select component.

It appears to make us of the new React Portal feature.