时间戳

首页 > 解决方案 > Mat-datepicker-toggle 显示在模态后面

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

问题描述

你好，我在使用 angular 4 和 bootstrap 4 时遇到问题。当我单击打开以显示日历时。它显示在我的模态后面。我想更改其类的 z-index，但我无法访问该类，因为它是自动生成的。我该如何解决问题？ 在此处输入图像描述 这是我的代码。 在此处输入图像描述 提前致谢。

标签： angularcalendarbootstrap-4bootstrap-modalbootstrap-datepicker

解决方案

问题是引导模式集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;
}

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

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

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

  • 如果您只想更改它，您将需要包含一个自定义类标识符以使其特定于您的模态日期选择器。

    ::ng-deep .cdk-overlay-container mat-datepicker-content{
  z-index:2000;
}

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

用什么代替 ::ng-deep

推荐阅读