角度材料日期选择器未在模态对话框中打开答案

【问题标题】：angular material datepicker doesn't open in modal dialog角度材料日期选择器未在模态对话框中打开
【发布时间】：2018-02-16 01:44:00
【问题描述】：

我有一个以引导模式形式实现的角度材料 2 日期选择器：

<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">{{title}}</h4>
    </div>
    <div class="modal-body"> 
        <div class="timeline-cal">
            <input class="date-field" [mdDatepicker]="picker" placeholder="Choose a date">
            <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
            <md-datepicker #picker></md-datepicker>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn grey-btn pull-right"     (click)="cancel()">Cancel</button>
        </div>
    </div>
</div>

但是，单击按钮后，日期选择器不会在模式对话框本身中打开，而是在后台打开。我试过了，但没有帮助：

.mat-datepicker-content{    z-index: 1200}

【问题讨论】：

我也遇到了同样的问题，你找到解决办法了吗？
同样的问题。
@kenfire 还没有！
你能在 jsfiddle 中添加一些示例代码吗？不要忘记选择您正在使用的相同框架，以便我们可以复制问题。
@yurzui 不，同样的行为

标签： html css twitter-bootstrap angular angular-material2

【解决方案1】：

试试，

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

或者这个

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

【讨论】：

【解决方案2】：

对我来说这很有效：

::ng-deep .cdk-overlay-container {
    position: fixed !important;
    z-index: 100000 !important; /* set value you need */
}

您必须为 z-index 指定特定位置。

注意：z-index 仅适用于定位元素（位置：绝对，位置：相对，或位置：固定）。 CSS z-index @ W3Schools

【讨论】：

【解决方案3】：

在组件html文件中添加这段代码：

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

希望这能彻底解决问题！！！

【讨论】：