Angular Material DatePicker Calendar Shows Behind Angular Modal

11
votes

I have the following simple code:

                <md-content>
                <md-datepicker ng-model="startDate" md-placeholder="Enter date">
                </md-datepicker>
                </md-content>

It populates fine, but when you click on it, the calendar I can see pops up in the shadow behind angular modal window.

*I'm using this datepicker: https://material.angularjs.org/latest/demo/datepicker

7
javascriptangularjsdatepickerangular-material
By "modal" do you mean $mdDialog? I think posting the entire html template of your dialog will be helpful. – Kelvin Dealca
I'm using $uiModal, where I use a templateUrl and controller, basically another view and js file that create a modal. – MilesMorales

7 Answers

20
votes

you just need to put this into the html template of the modal:

<style> 
.md-datepicker-calendar-pane{
z-index: 1200}
</style>
10
votes

The accepted answer is outdated. For @angular/material 5.0.0-rc0 have used with success:

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

https://stackoverflow.com/a/47274694/1225421

3
votes

I ended up going into angular-material.css and changed the Z-index to 1151.

 .md-datepicker-calendar-pane {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1151;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .md-datepicker-calendar-pane.md-pane-open {
    -webkit-transform: scale(1);
            transform: scale(1); }
3
votes
::ng-deep .cdk-overlay-container {
  z-index: 1200 !important;
}

For Bootstrap 4 and Angular 9 material working fine.

1
votes

Just like ACSteel, you can force the CSS to bring it to where you need however doing it in the module's css file isn't a good technique.

Any updates to AngularMD will overwrite your changes, you're better off forcing the CSS in your own CSS and add "!important" to the rules.

Good luck!

1
votes

You need to specify /deep/ since this is runtime generated class:

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

0
votes

Add this code in the component html file :

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