angular material datepicker doesn't open in modal dialog

7
votes

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}
3
htmlcsstwitter-bootstrapangularangular-material2
I have the same problem, did you find a solution ? – kenfire
Same issue here. – qwertoyo
@kenfire Not yet! – HBK
Can you add some example code in a jsfiddle? Don't forget to select the same framework you are using so we can replicate the issue. – Adriano
@yurzui nope, same behaviour – qwertoyo

3 Answers

3
votes

try,

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

Or this

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

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

0
votes

Add this code in the component html file :

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

Hope fully this will resolve the issue !!!