ng-select: Dropdown menu is misplaced when page scroll bar is not visible
Describe the bug When the page has scroll bar, everything is fine. When the scroll bar is not visible, the dropdown menu is misplaced.
Screenshots
- This is when the page do not have scroll bar
- And this is with scroll bar
You can see the difference clearly. I just upgrade to the latest version I also tried
body {
position: relative;
}
in styles
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 1
- Comments: 22 (3 by maintainers)
Commits related to this issue
- Fixes #1404 Taking scroll/no-scroll into account — committed to slavede/ng-select by slavede 4 years ago
- feat: Fixes #1404 Taking scroll/no-scroll into account #1601 — committed to sofico-global/ng-select by deleted user 4 years ago
- Fixes #1404 Taking document scrollbars into consideration as well — committed to slavede/ng-select by slavede 4 years ago
- fix #1404 — committed to sofico-global/ng-select by deleted user 4 years ago
- fix: fix menu position when scrollbar is not visible (#1404) (#1739) — committed to ng-select/ng-select by david-ding 4 years ago
- Backport fix #1739 on branch 3.x Fix defect #1404 on branch 3.x by backporting merge #1739 — committed to Alban34/ng-select by deleted user 3 years ago
Here it is if you don’t believe issue (it’s forked example from official examples)
https://stackblitz.com/edit/angular-6c2svw?file=src%2Fbindings-default-example.component.ts
I’ve opened PR that fixes this. Hopefully, it gets in asap and new version is tagged.
Any idea on when this PR is getting released / merged? Thanks
We’re experiencing the same problem. Quite annoying. Would be great if a solution gets released.
Otherwise a great library 😉
To hopefully push this PR more quickly here’s explanation why does it happen. Scenario when you don’t have scrollbar on your body. When ng-select generating dropdown, it sets class to it which appears under the body and then body gets scrollbar. Then positioning is calculated as if body would have scrollbar, but then after setting position vertically this scrollbar dissapears and positioning is now wrong since scrollbar got away (this PR will handle it in a way that it hides scrollbar always whenever it’s calculating position)
We are looking for a similar solution in our own projects.
body { position: relative; }does not help.