Geek Answers Handbook

Angular Material DatePicker Calendar Shows Angular Modal

I have the following simple code:

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

It fills perfectly, but when you click on it, the calendar that I see pops up in the shadow behind the angular modal window.

* I use this datepicker parameter: https://material.angularjs.org/latest/demo/datepicker

+9
source share
4 answers

you just need to put this in the html modal template:

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

The accepted answer is out of date. For @angular/material 5.0.0-rc0 successfully used:

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

fooobar.com/questions/1004266 / ...

+4
source

I ended up going to angular -material.css and changing 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
source

Like ACSteel, you can force CSS to bring it where you need to, but doing it in the module's css file is not a good technique.

Any updates to AngularMD will overwrite your changes, you'd better force CSS in your own CSS and add "! Important" to the rules.

Good luck

0
source

More articles:


All Articles