角度材料日期选择器未在模态对话框中打开 [英] angular material datepicker doesn't open in modal dialog

问题描述

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

<div class="modal-content"><div class="modal-header"><h4 class="modal-title">{{title}}</h4>
<div class="modal-body"><div class="timeline-cal"><input class="date-field" [mdDatepicker]="picker" placeholder="选择日期"><md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle><md-datepicker #picker></md-datepicker>

<div class="modal-footer"><button type="button" class="btn grey-btn pull-right" (click)="cancel()">Cancel</button>

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

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

解决方案

try,

::ng-deep .cdk-overlay-container {z-index:1200！重要；}

或者这个

/deep/.cdk-overlay-container {z-index:1200！重要；}

I have an angular material 2 date-picker implemented in a bootstrap modal form:

<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>

However, upon clicking the button, the datepicker wouldn't open in the modal dialog itself but opens in the background. I tried this but didn't help:

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

解决方案

try,

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

Or this

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

这篇关于角度材料日期选择器未在模态对话框中打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！