'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).

I do not know how to solve this problem.

Solution 1:^[1]

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.

Solution 2:^[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	dae721
Solution 2	Ousama

'ng-select dropdown behind other elements

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]