Question

我需要在基于Angular 6的Web门户上的ng-sidebar中显示nb-datepicker。主要问题是我无法更改ng-sidebar的CSS（默认情况下z-index为99999999），因此datepicker的弹出窗口隐藏在侧边栏后面（日期选择器容器的z-index为1000）。

我尝试直接更改/覆盖CSS。检查元素时，可以在“ ng-sidebar”中看到一个“ aside”元素。 “ aside”元素具有以下CSS：

.ng-sidebar[_ngcontent-c17] {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    pointer-events: auto;
    position: absolute;
    touch-action: auto;
    will-change: initial;
    z-index: 99999999;
}

将“ z-index”更改为999，将DatePicker放在前面，但是我无法从我的component.scss文件中应用此样式。

需要帮助。我尝试过：

:host ::ng-deep aside{
      z-index: 999;
}

和

.ng-sidebar[_ngcontent-c17]{
      z-index: 999;
}

和许多其他组合，但没有解决问题的方法。请帮忙。

Answer 1

请在您的CSS或CSS文件上尝试使用此代码

 ng-sidebar-container {
    z-index: 100;
 }

Answer 2

将:: ng-deep用作

::ng-deep .ng-sidebar[_ngcontent-c17] {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    pointer-events: auto;
    position: absolute;
    touch-action: auto;
    will-change: initial;
    z-index: 999;
}

在ng-侧边栏中显示nb-datepicker

2 个答案: