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.

Position of select menu not based on scrollable parent

See original GitHub issue

As mentioned in PR 3531,

It does not solve all use cases, as there is still code that checks for available view height on window (viewSpaceBelow >= menuHeight), and not inside the container.

I’m facing the similar issue when the menu is present near the bottom of the view area inside a scrollable div, in my case a slide panel, the menu’s positioning is being based on the window height and not the scrollable parent. The following are the issues that I’m facing:-

The menu is being truncated if there is some other container at the bottom of the page but the menu can fit inside the window and is being placed at the bottom.
The scrollable div is not being scrolled to bring the menu into the view.
If I use menuPosition = "fixed", I’m able to remove the truncation problem, but that brings another issue as the position of menu is not being changed if the parent div is scrolled up or down.

I’m working on a fix for the getMenuPlacement function inside Menu.js, and trying to change the calculations based on the scrollable parent instead of using the window every time. If there is no scrollable parent, then the default thing will be working as is. If anyone else is working on this issue, do let me know.

Issue Analytics

State:
Created 4 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

2reactions

prateek0227commented, Jun 24, 2020

My apologies @IanVS I guess I missed your previous comments. @bladey I spent my whole day today trying to check if Ian’s changes work for me but unfortunately they are not working and I’m able to reproduce the main issue. If the changes I made in packages/react-select/src/utils.js are also added to Ian’s changes, then they seem to work a little bit but not for every case. I have also made a tiny update to my PR and now every issue seems to fixed.

0reactions

mattaningramcommented, Jun 23, 2020

@bladey I can’t speak for @prateek0227 but it appears the PR would address this same issue I am having. I am not dealing with the scroll-to issue the PR also deals with, but the positioning not being based on nearest scrollable parent as @prateek0227 describes is causing me a lot of problems.

Top Results From Across the Web

How can I absolutely position this dropdown in an overflow ...

Not sure if it is the right way of doing it, but it works. One thing you have to keep in mind is...

overscroll-behavior - CSS: Cascading Style Sheets | MDN

If you have overscroll-behavior: contain; selected, the outer container will not scroll unless you move your cursor out of the inner ...

Scrolling a CSS-driven dropdown menu and overflow:hidden?

The only way I can see to do this is that in the scroll routine you add a class (.isScrolling) to the parent...

How to Add Scroll Functionality to Your Dropdowns - Solodev

However, there are times when you have no choice but to use a lot of menu selection items in dropdown menus for example,...

Scrollspy · Bootstrap v5.0

Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.