Angular Material DatePicker 日历显示在 Angular 模态后面

Question

我有以下简单代码：

                <md-content>
                <md-datepicker ng-model="startDate" md-placeholder="Enter date">
                </md-datepicker>
                </md-content>

填充正常，但是当您单击它时，我可以看到的日历会在 angular 模态 window 后面的阴影中弹出 window。

*我正在使用这个日期选择器： https://material.angularjs.org/latest/demo/datepicker

Answer 1

我最终进入 angular-material.css 并将 Z-index 更改为 1151。

 .md-datepicker-calendar-pane {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1151;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .md-datepicker-calendar-pane.md-pane-open {
    -webkit-transform: scale(1);
            transform: scale(1); }

Answer 2

就像 ACSteel 一样，您可以强制 CSS 将其带到您需要的位置，但是在模块的 css 文件中执行此操作并不是一个好的技术。

对 AngularMD 的任何更新都会覆盖您的更改，您最好在自己的 CSS 中强制使用 CSS 并在规则中添加“!important”。

祝你好运！

Answer 3

您只需要将其放入模态的 html 模板中即可：

<style> 
.md-datepicker-calendar-pane{
z-index: 1200}
</style>

Answer 4

已接受的答案已过时。 @angular/material 5.0.0-rc0使用成功：

.cdk-overlay-container{ z-index: 1200 !important; }

Answer 5

您需要指定 /deep/ 因为这是运行时生成的 class:

/deep/ .cdk-overlay-container{ z-index: 1200 !important; }

Answer 6

::ng-deep .cdk-overlay-container {
  z-index: 1200 !important;
}

对于 Bootstrap 4 和 Angular 9 material 工作正常。

Answer 7

在组件 html 文件中添加此代码：

<style>
  ::ng-deep .cdk-overlay-container {
    z-index: 2000;
</style>

Angular Material DatePicker 日历显示在 Angular 模态后面

Angular Material DatePicker Calendar Shows Behind Angular Modal

javascript

datepicker

angularjs

angular-material