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:

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

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)

[varnastadeus]

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

[earshinov]

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