Mat-datepicker-toggle 显示在模态后面

Question

你好，我在使用 angular 4 和 bootstrap 4 时遇到问题。当我单击“打开”以显示日历时。它显示在我的模式后面。我想更改其 class 上的 z-index，但我无权访问 class，因为它是自动生成的。我该如何解决这个问题？这是我的代码。提前致谢。

Answer 1

问题是 bootstrap-模态集 z-index:1050

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

material 日期选择器在创建 ckd-overlay-pane 时设置 z-index: 1000

.cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    max-width: 100%;
    max-height: 100%;
}

将此添加到您的组件样式 sheet 应该可以解决问题...但这将适用于整个项目中的所有日期选择器。

您将需要包含一个自定义 class 标识符以使其具体化如果您只想更改模态日期选择器，则添加到您的模态日期选择器。
```
::ng-deep .cdk-overlay-container mat-datepicker-content{
  z-index:2000;
}
```

请参考这个 SO 问题的答案，了解为什么可以使用 ::ng-deep，直至另行通知。

Mat-datepicker-toggle 显示在模态后面

Mat-datepicker-toggle showing behind modal

calendar

bootstrap-modal

bootstrap-datepicker

bootstrap-4

angular