ng-select dropdown behind other elements

user_7855674 0
Viewed 5852

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.

twitter-bootstrap angular
2 Answers

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.

user_17360320

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>
user_95756310
Related