8

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:

enter image description here

Actual behaviour:

enter image description here

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

enter image description here

Dev Db
  • 740
  • 4
  • 10
  • 30
  • 1
    Does the solution `[appendTo]="'body'"` don't work as stated on the github ticket? – Bk Santiago May 16 '18 at 08:40
  • I Edited the question with what it looks like with [appendTo]="'body'" – Dev Db May 16 '18 at 08:50
  • 2
    Looks like It was able to get out of the dialog, can try updating it's `z-index` to a much higher value than the dialog? – Bk Santiago May 16 '18 at 08:54
  • I will +1 this question because `[appendTo]="'body'"` did work for me. I have a `ng-select` element inside a component that sits inside a `mat-expansion-panel`, and the contents at the bottom would get cut off. – MDMoore313 Apr 04 '20 at 11:22

2 Answers2

12

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

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

Vijay Kanaujia
  • 439
  • 4
  • 9
1

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

Fussel
  • 1,740
  • 1
  • 8
  • 27
  • Works perfect for my purpose. Thanks – Dev Db May 16 '18 at 09:09
  • Position="absolute" does not work in IE. Any change on how to get it to work in IE? – Dev Db Jun 04 '18 at 10:51
  • Comments state that you have to set a relative position to the absolut positioned elements parent, but don't know if that works here. But pretty sure that there are many solutions on the web and feel free to edit the post then. – Fussel Jun 05 '18 at 06:09