Question

108

Angular Material DatePicker Calendar Shows Behind Angular Modal

rated 0 times [ 112] [ 4] / answers: 1 / hits: 19010 / 8 Years ago, thu, april 14, 2016, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dayshadelaniej

Add To Favorites

Follow

Total Points: 668

Total Questions: 121

Total Answers: 121

Location: Sao Tome and Principe

Member since Wed, Dec 21, 2022

1 Year ago

answered 8 Years ago kaleyv · Accepted Answer

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