twitter-bootstrap - ng-select 其他元素后面的下拉菜单

Question

我用 ng-select使用 Angular 4 和 Bootstrap 4。

下拉菜单位于我的日期选择器(ng-bootstrap)后面。



我不知道如何解决这个问题。

Answer 1

我能够通过覆盖下拉菜单的 ng-select 的 z-index 来解决这个问题:

1)我将以下内容添加到我的组件的 scss 文件中(即托管 ng-select 的组件):

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

(我必须在 css 选择器中同时指定 ng-select 和 select-dropdown 以增加 css 的特异性，因此它胜过 ng-select 的 css，至少我认为这就是原因)。

2) 我添加了 encapsulation: ViewEncapsulation.None到组件的装饰器，因此它的 css 也适用于 ng-select 组件。