ng-select: Dropdown position is incorrect when ng-select is placed in a scrollable container

Bug Description

In https://github.com/ng-select/ng-select/issues/237 and https://github.com/ng-select/ng-select/pull/238 ng-select learned to display its dropdown above the select in case there is no enough room below. It does not seem to work when ng-select is placed in a scrollable container.

To Reproduce Steps to reproduce the behavior:

Visit the demo page https://stackblitz.com/edit/angular-rxjygd.
Scroll the scrollable element to the end to reveal the test ng-select.
Expand ng-select by pressing the arrow button.
The dropdown appears under the select and is not fully visible to the user until he/she scrolls the scrollable element further down.

ng-select incorrect dropdown position demo

Expected behavior In the reproduction scenario, the dropdown should be placed above the select so that it is fully visible to the user.

I believe that generally NgDropdownPanelComponent._calculateCurrentPosition method should consider ng-select’s position relative to its nearest parent with overflowY != 'visible'. If there is no such parent, the method should rely on body / window as it does unconditionally now.

Environment: (does not really matter)

OS: Windows 10 x64
Browser: Google Chrome 68.0.3440.106 (Official Build) (64-bit)

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 7
Comments: 24 (5 by maintainers)

Most upvoted comments

I think appendTo="body" is valid solution and I am not sure if something else needs to be done here. Don’t forget to set

body {
    position: relative;
}

with appendTo body as mentioned in docs

varnastadeus on Jul 12, 2019

For the record, here is what happens with appendTo="body":

appendTo body

earshinov on Mar 30, 2019

I think this can be closed or docs/FAQ can be updated, appendTo="body" is the only solution. You need to have dropdown outside of scrollable container. This is how CSS works.

jcubic on Mar 29, 2019

@info-lvsys I am not sure what fix you are expecting. You have container with overflow and content inside that container will stay in the same block formatting context. Imagine you have button which adds table inside your modal with overflow, will you expect it to appear on top of modal fully visible? Obviously not, it will just expand your overflowing content as in your example above.

Of course this not perfect situation thats why we have addressed this with appendTo="body" which will render dropdown inside body allowing it to appear on top any element fully visible. Cheers

varnastadeus on Feb 15, 2019