Angular 5 - Bootstrap datepicker in bootstrap modal

Question

I'm using ngx-bootstrap for datepicker. But when I use this datepicker inside modal, It opens under modal.

My issue is similar to this . But css changes are not working for me. Any help whould be appreciated.

Answer 1

I think You need to change the parent class style . this will work for ngx-bootstrap calendar

follow this code bs-datepicker-container, bs-daterangepicker-container { z-index: 2000; }

Answer 2

You are probaly using the wrong class if you follow that answer.

I took a look at the github code and saw that the class name used there is bs-calendar-container.

You might want to verify that this is the case for your wrongly z-indexed elements by inspecting them in your developer tools(F12) and verifying the class name on them.

Then you might want to change the z-index to have them appear above the modal.

The problem is caused by the modal being a direct child of the body element, and the datepicker date chooser also being a direct child of the body element, so they are competing for the same z-index space.

The bootstrap modals usually have an z-index of 1000. So setting the z-index of your datepicker item to 1200 should help, to make sure they also appear above elements that are present within the modal.

In case your datepicker has the class bs-calendar-container your CSS would look like this:

.bs-calendar-container {
    z-index: 1001;
}