Ng-select inside dialog add extra hidden height

Question

when using ng-select inside a dialog, the content of the dropdown is not displayed outside the dialog with an overflow. I saw this question also on github, but there was no solution found.

https://github.com/ng-select/ng-select/issues/240

Demo: https://stackblitz.com/edit/angular-material2-issue-yesgfz

How can I solve this?

Expected behaviour:

Actual behaviour:

Solution from github with [appendTo]="'body'"

Answer 1

paste appendTo="body" on your ng-select tag

<ng-select appendTo="body" [items]="data" bindLabel="name" bindValue="id" placeholder=""></ng-select>

Answer 2

You could, even if it's probably not ideal, do this

<div style="display: block; height: 40px;">
  <ng-select [searchable]="false" style="position: absolute; width: 200px;">
    <ng-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </ng-option>
  </ng-select>
</div>

Requires some fixed values, but the absolute position solves your issue and fiddling a bit with css may give you the result you want in a decent way.

Edit: Stackblitz link