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}

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, Nov 10 '17 at 06:01
@yurzui: I have found the issue. It was me not knowing the correct way to style angular >=2 material components :) reference: https://angular.io/guide/component-styles#view-encapsulation and if you're using webpack, you'll need to-string-loader — qwertoyo, Nov 13 '17 at 14:02
Possible duplicate of [Changing style of overlay container](https://stackoverflow.com/questions/45610137/changing-style-of-overlay-container) — JSON, Feb 28 '18 at 23:03

score 4 · Answer 1 · edited Feb 28 '18 at 19:21

4

try,

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

Or this

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

edited Feb 28 '18 at 19:21

NightOwl888

55,572
24
139
212

answered Feb 28 '18 at 18:25

JSON

1,583
4
31
63

score 0 · Answer 2 · answered Oct 29 '18 at 09:49

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

score 0 · Answer 3 · answered Apr 26 '21 at 15:11

0

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

answered Apr 26 '21 at 15:11

shriyansh jain

99
1
9

angular material datepicker doesn't open in modal dialog

3 Answers3

Linked