Angular Material DatePicker Calendar Shows Behind Angular Modal

Question

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

Answer 1

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

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

Answer 2

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

Answer 3

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); }

Answer 4

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

For Bootstrap 4 and Angular 9 material working fine.

Answer 5

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!