angular material datepicker doesn't open in modal dialog

Question

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}

Answer 1

try,

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

Or this

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

Answer 2

For me this worked:

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

You have to specify certain position for z-index.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). CSS z-index @ W3Schools