Select Dropdown not remaining fixed to container while scrolling
See original GitHub issueVersion
2.10.2
Environment
Ubuntu 16.04, chrome version 60.0.3112.90
Reproduction link
https://codepen.io/adamaho/pen/KZoezp
Steps to reproduce
click the Select to open the dropdown and scroll.
What is expected?
I would expect the dropdown to remain attached to its container when you scroll.
What is actually happening?
The dropdown is detaching from its container and scrolling.
Proposed Solution: Have the Select
component be wrapped in a div and then pass that div to getPopupContainer
using a ref
. In my testing this resolved the scrolling issue.
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Dropdown Menu Doesn't Stay in Place When Scrolling
Basically Iam having trouble when a user "scrolls" with the Datetime Picker, where it "scrolls" with the page instead of being fixed. Basically ......
Read more >scroll-behavior - CSS: Cascading Style Sheets - MDN Web Docs
The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs ...
Read more >Prototype scrolling with overflow behavior - Figma Help Center
It's not possible to position scrolling objects above fixed layers. To create a fixed object: Select the object, group or component in the...
Read more >Dropdown Selection List Not Anchored When Scrolling
Leave the selection list open and move the mouse to the side, over the labels for example. Scrolling with the mouse wheel will...
Read more >Element size and scrolling - The Modern JavaScript Tutorial
It becomes visible when the document is right-to-left (the operating system is in Arabic or Hebrew languages). The scrollbar is then not on...
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 FreeTop 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
Top GitHub Comments
<Select getPopupContainer={trigger => trigger.parentNode}>
We’ve been having to implement
getPopupContainer
on almost all of our components, is there not a better way this can be implemented in a general fashion @afc163?Could this be done on the
Select
component?