Ng select dropdown is hidden by the dialog

user_11840165 0
Viewed 3218

The code on stackblitz

I've tried using position fixed and z index, but the select remains fixed and when scrolled, it overlaps other content in the dialog

this is the actual output i'm expecting

angular css
2 Answers

Default implementation of ng-select append these options with element, which when opening in dialog box depends on dialog box size. To display this outside of this dialog box or any parent element, need to append this with browser body.

<ng-select [searchable]="false" [appendTo]="'body'">
user_54294280
  1. You need to set input appendTo: <ng-select **[appendTo]="'body'"**>...</ng-select>
  2. And add style in your component.ts:
::ng-deep .ng-dropdown-panel {
     z-index: 9999999!important;
 }
user_92833130
Related