CODEWITHSUNDEEP
twitter-bootstrapangular
Kymz
Kymz

Reputation: 71

ng-select dropdown behind other elements

I use ng-select with Angular 4 and Bootstrap 4.

The dropdown menu goes behind my datepicker (ng-bootstrap).

The problem

I do not know how to solve this problem.

Upvotes: 7

Views: 11042

Answers (2)

Ousama
Ousama

Reputation: 2810

I fixed this issue by simply adding appendTo="body" on my ng-select :

<ng-select appendTo="body" 
    [items]="nature_structure_recherches"
    placeholder="Nature"
    formControlName="nature"
    [multiple]="false">
</ng-select>

Upvotes: 6

dae721
dae721

Reputation: 106

I was able to solve this by overriding ng-select's z-index for the dropdown:

1) I added the following to my component's scss file (i.e. the component that hosts the ng-select):

ng-select select-dropdown > div {
    z-index: 2;
}

(I had to specifiy both ng-select and select-dropdown in the css selector to increase the css specificty so it win out over ng-select's css, at least I think that's why).

2) I added encapsulation: ViewEncapsulation.None to the component's decorator so its css would also apply to the ng-select component.

Upvotes: 3

Related Questions