CODEWITHSUNDEEP
cssangular
Shivani
Shivani

Reputation: 301

Ng select dropdown is hidden by the dialog

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

Upvotes: 7

Views: 8216

Answers (2)

Lidiya Parshina
Lidiya Parshina

Reputation: 324

  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;
 }

Upvotes: 3

Gourav Garg
Gourav Garg

Reputation: 2911

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'">

Upvotes: 13

Related Questions