html - Angular Material 日期选择器不会在模式对话框中打开

Question

我有一个以 Bootstrap 模式形式实现的 Angular Material 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}

Answer 1

尝试，

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

或者这个

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