Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
positioning the component in containers that have `overflow: scroll;`
See original GitHub issueI 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?
Issue Analytics
- State:
- Created 8 years ago
- Reactions:45
- Comments:64 (2 by maintainers)
Top Results From Across the Web
CSS position element "fixed" inside scrolling container
Place the scroll container and the header inside another container, that has a fixed height. Then position: absolute the header inside the outer...
Read more >Using Position Absolute Inside A Scrolling ... - Ben Nadel
Ben Nadel looks at the way absolutely positioned elements behave inside an "overflow: auto" viewport. And, how to wrap the content in order ......
Read more >Overflowing content - Learn web development | MDN
Using overflow: scroll , browsers with visible scrollbars will always display them—even if there is not enough content to overflow. This offers ...
Read more >Using Position Absolute Inside A Scrolling Overflow Container
Ben Nadel looks at the way absolutely positioned elements behave inside an " overflow : auto " viewport. And, how to wrap the...
Read more >CSS 'position: sticky' not working? Try 'overflow
Since it is now a scroll container, it needs a specified height in order for position: sticky to work. You did not specify...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
one more use case when dropdown should flow above all elements and should not be restricted by container’s size
Did you try using menuPosition=“fixed” like that:
<ReactSelect {...props} menuPosition="fixed" />?