positioning the component in containers that have `overflow: scroll;`

[ksmth]

I recently ran into this issue when using react-select components in a modal. For mobile the contents of the modal are scrollable. In this particular case, the Select was at the bottom of the content. Activating the Select made the container overflow and scrollable.

Maybe the container notion of http://react-bootstrap.github.io/react-overlays/examples/ might make sense?
Alternatively, maybe make use of https://github.com/souporserious/react-tether?

[geon]

Really important feature.

There are plenty of situations where you you don't want the drop-down to cause overflow. Actually, it should be the default behavior, since that's how the native select box work.

[oluckyman]

one more use case when dropdown should flow above all elements and should not be restricted by container’s size

[khmelevskii]

+1

[juan0087]

@oluckyman Having the same issue here! If I have other elements below the Select, I have no issues since there is plenty of space and I also reduce the height of the dropdown, but when the select is closer to the bottom of the page it pushed the main container.

Were you able to find a solution for this?

[maxmatthews]

Has anyone had any luck with this? I can't use a react-select in a modal without it causing scrolling issues. If I try and hijack .Select-menu-outer and set it to position: fixed I get weird scrolling issues. Someone suggested using react-tether, but it doesn't look like that's an easy implementation.

[juan0087]

@maxmatthews you can try the following, it worked for me.

1 - Comment out the rule /*top:100px*/ from the original css class .Select-menu-outer
2 - Add the following custom css to your stylesheet:

.menu-outer-top .Select-menu-outer {
    bottom: 35px!important;
    border-bottom-right-radius: 0px!important;
    border-bottom-left-radius: 0px!important;
    border-top-right-radius: 4px!important;
    border-top-left-radius: 4px!important;
}

3 - Add the class .menu-outer-top to the Select to manually change to position of the dropdown (See screenshot below)

                <Select
                  name="form-field-Country"
                  value="one"
                  className="menu-outer-top"
                  placeholder=" Please choose a country"
                  value = {Country.value}
                  clearable = {false}
                  options={this.props.countries}
                  onChange={this.SelecCountryChange}
                  optionComponent={CountryOption}

                  />

Example:

Final results:

Hope it helps!

[maxmatthews]

@juan0087 WOW! Thanks for that detailed response. Will give it a shot right now, and I'm sure it will help others in the future.

[juan0087]

It's a pleasure! It's not 100% the correct way to do it but it does the job.

[maxmatthews]

@juan0087 Using your solution I still have a problem with the select menu getting cropped by the bounding modal box/div. Any suggestions?

[maxmatthews]

To further complicate things, if you scroll in Chrome it uncrops the menu and shows the whole thing. Could that possible be related to this comment in menu.scss?

    // Unfortunately, having both border-radius and allows scrolling using overflow defined on the same
    // element forces the browser to repaint on scroll.  However, if these definitions are split into an
    // outer and an inner element, the browser is able to optimize the scrolling behavior and does not
    // have to repaint on scroll.

[maxmatthews]

I just ended up setting my modal to overflow: auto and had to make no other changes. So my problem is resolved, but in case anyone else stumbles upon this, check out the react-modal closed issue above.

[benkeen]

+1

[M3lkior]

Same Issue here.