React-select: dropdowns not going outside of bounding containers

[wbecker]

It seems that dropdowns seem to render only within the parent container that the select is in, instead of being on top of the entire page.

I currently have a dropdown in a material-ui card and when it opens up it clips the content.

I have seen other projects position it using "fixed" so that it can live outside the normal flow - at the moment it is "absolute".

[RichardForrester]

Are there any good work-arounds for this?

I have a select box near the bottom of a form element and the options are cutoff where the parent container ends. It should flow over.

[solognt]

+1

[dcworldwide]

Anyone have a work-around? Breaks my site as well

[juan0087]

+1

[wbprice]

👍

[winterbe]

The dropdown menu has css position: absolute, so it's bound to the parent container. As a result the dropdown menu changes the height of the parent container which is problematic in some cases, e.g. if the parent container is some kind modal dialog.

In those cases the dropdown menu should mimic the original behavior of selects where it overlaps other elements on the page. In order to achieve this behavior the dropdown menu must have position: fixed and the positioning (top, left, right) must be handled manually. It has to be attached to the position of the select control and the position must be manually change when scrolling the viewport.

I'm curious if this could be achieved by utilizing menuRenderer to draw a custom menu. Maybe a core contributor could point us into the right direction?

[maxmatthews]

Anyone have any luck or updates with this? I'm also commenting on a similar issue: https://github.com/JedWatson/react-select/issues/810

[maxmatthews]

My solution was just to add overflow: visible to the parent container (in the case my modal).

[plantvsbirds]

my solution would be making it act more like jquery-ui's dropdown, which positions its list of choices outside the component in </body>, with absolute(or fixed?) position.

I accomplish this by extending the Select class and overwriting componentDidUpdate method, check if it just opened new list of choice, and position the list accordingly.

[zedrdave]

Is a fix planned for this?

This is a pretty major feature issue for a dropdown replacement… (it is not always possible to change the container to allow visible overflow)

@plantvsbirds would you mind sharing the code for your fix?

[plantvsbirds]

Check "react portal". This requires some hack to react-select's render
function

Dave [e-mail]于2016年12月5日 周一22:15写道：

Is a fix planned for this?

This is a pretty major feature issue for a dropdown replacement… (it is
not always possible to change the container to allow visible overflow)

@plantvsbirds https://github.com/plantvsbirds would you mind sharing
the code for your fix?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/JedWatson/react-select/issues/404#issuecomment-265056329,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF6oJnrsuv22dbTHZcFJ4becULJTt9uuks5rFOFygaJpZM4FxQia
.

[gram7gram]

+1

[kumarharsh]

The best way would be something like React-Portal, like @plantvsbirds pointed out. This is how I solved it:

https://gist.github.com/kumarharsh/5ada99a2f6b5867984991b70bdc453a1

basically, I used the defaultMenuRenderer from react-select/lib/utils/defaultMenuRenderer, and wrapped it inside a portal...

[tulbox]

+1

[kumarharsh]

@JedWatson I'm using react-portal, but in the case when the select has no entries, it shows the placeholder. In this case, the defaultMenuRenderer is not used, but rather a plain div is used. See the relevant code here: https://github.com/JedWatson/react-select/blob/ef3a4687bc67684809c3a2648143a1c325ee987e/src/Select.js#L974

Can some change be made so that the placeholder also uses the defaultMenuRenderer? Without this, it's impossible to prevent the empty select from being cut-off.

[jwilander]

+1

[cjtafoya]

+1

[udaypant]

+1

[ramirez]

+1

[wbecker]

Should be using portals at some point, probably!

https://facebook.github.io/react/docs/portals.html

[bergenmatt]

It doesn't solve the problem, but adding the following override to your stylesheet will at least expand the container component to encompass the dropdown:

.Select-menu-outer {
position: relative;
}

[vexilar]

I was running into this problem using react-select inside of a filter in react-table and wasted a bunch of time trying to get fixed positioning correct. Turned out the fix was much easier than that; all I had to was add overflow: visible to the parent container!

[kumarharsh]

You will also need to set overflow:visible for all of select's parents too, and it becomes superhard for more complex apps.

[tommyalvarez]

In my case i had to do the same as @vexilar, but in my case i was putting the react-select inside a react table cell (a td in normal html), so i had to add overflow: visible to the table props, tbodyprops and tdprops. Leaving it here in case anyone else has trouble.
React Portals did not work for me as it render the opened menu in another area of the page.

[gwyneplaine]

resolved in v2 http://react-select.com/advanced#portaling

[gtaylor44]

Example usage of portaling (in v2)... thanks @gwyneplaine

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

[lharley]

the component has an "appendTo" property. Set appendTo={document.body} and everything displays as expected.

[emlynmac]

I'm having this exact problem in bp3. I'm not clear how to get my popover to get out of the trapping div. Does anyone know how to solve this in the component?

[Shadowman4205]

Hello,
have got same issue but with iframe.
Any suggestion how i should show in on top page where is iframe?

[elbadryd]

<Select styles={{ menuList: (base) => ({ ...base, position: 'fixed !important', backgroundColor: 'white', border: '1px solid lightgray', width: '20rem', }), }} />
i struggled with this for several hours, and eventually added this into the custom Styles prop