Angular Material DatePicker 日历显示在 Angular Modal 后面 [英] Angular Material DatePicker Calendar Shows Behind Angular Modal

问题描述

我有以下简单的代码:

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

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

It populates fine, but when you click on it, the calendar I can see pops up in the shadow behind angular modal window.

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

*I'm using this datepicker: https://material.angularjs.org/latest/demo/datepicker

推荐答案

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

I ended up going into angular-material.css and changed the Z-index to 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); }

这篇关于Angular Material DatePicker 日历显示在 Angular Modal 后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！