ng-select drop down position is not correct in scroll able div

Question

I am facing issue with ng-select when it is used in scroll able div. Please find the screen shot -

Issue : The gap is coming between search text box and drop down, downtown should move with search input box. To reproduce the issue - https://stackblitz.com/edit/ng-select-uygqu1?file=app%2Fapp.component.ts

click on the first drop down (ng-select). It will open up the available options. Now scroll by using two finger on laptop mouse key pad / scroll from mouse.

Any help is much appreciated.

Thanks in Advance.

Answer 1

Follow this Link- https://ng-select.github.io/ng-select#/append-to-element

I am facing this issue in my angular project when, I am using ng-select in modal. If, dropdown is opened and trying to scroll modal that time.. I tried every existing solutions for this problem but those solutions are not helpful for me. Then, I solved my problem like below..

Solution - Create a wrapper, keep ng-select inside of that wrapper and add appendTo attribute in ng-select with dot(.)

<div class="userList-wrapper" style="position: relative">
  <div style="overflow-y: auto; overflow-x: hidden">
    <ng-select
      appendTo=".userList-wrapper"
      [items]="userList"
      class="no-shadow no-outline"
      bindLabel="name"
      bindValue="name"
      [searchable]="true"
      [clearable]="false"
      placeholder="Select user name"
    </ng-select>
  </div>
</div>

Answer 2

You're appending the drop down to the body, not to the ng-select , so by definition it will calculate the position of the ng-select according to the body, that is it's last received position.

It will not update the position once opened when you scroll (not supported), you need to close the drop down when scrolling happens (not supported by ng-select - issue is currently opened - suggestions also given by support in link ), then open the drop down as required.

Even if you don't close the drop down and somehow it miraculously updates the position when scrolling, the drop down will show even if the ng-select is hidden in the overflow, which will not look nice.

I suggest to close the drop down when scroll is happening. You can't have both absolute positioning and show it outside the table and then hide it when the ng-select is hidden. JQuery perhaps but don't know much about that.