question-mark
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.

Select Dropdown not remaining fixed to container while scrolling

See original GitHub issue

Version

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:closed
  • Created 6 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

30reactions
romanshutsmancommented, Jul 24, 2019

<Select getPopupContainer={trigger => trigger.parentNode}>

3reactions
megawaccommented, Jan 11, 2018

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?

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.

Could this be done on the Select component?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found