Question

我有以下简单的代码：

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

它填充得很好，但当你点击它时，我能看到的日历会在角度模态窗口后面的阴影中弹出。

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

Answer 1

你只需要把它放到模态的html模板中：

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

Answer 2

我最终进入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 3

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

https://stackoverflow.com/a/47274694/1225421

Answer 4

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

for bootsrtap 4 and a

ngular 9材料工作正常。

Answer 5

就像ACSteel一样，你可以强制CSS将它带到你需要的地方，但是在模块的css文件中这样做并不是一个好方法。

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

祝你好运！

Answer 6

您需要指定/ deep /，因为这是运行时生成的类：

/ deep / .cdk-overlay-container {z-index：1200！important; }

Answer 7

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

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

角度材质DatePicker日历显示角度模态

7 个答案: