Angular 5 - Bootstrap datepicker в модальном бутстрэпе - PullRequest
1 голос
/ 27 марта 2019

Я использую ngx-bootstrap для выбора даты. Но когда я использую этот указатель даты внутри модального, он открывается под модальным.

Like this

Моя проблема похожа на this . Но изменения CSS не работают для меня. Любая помощь будет оценена.

1 Ответ

0 голосов
/ 27 марта 2019

Вы, вероятно, используете неправильный класс, если вы следуете этому ответу.

Я посмотрел на код github и увидел, что используемое имя класса - bs-calendar-container.

Возможно, вы захотите проверить, так ли это для ваших неправильно z-проиндексированных элементов, проверив их в инструментах разработчика (F12) и проверив имя класса на них.

Тогда вы, возможно, захотите изменить z-index, чтобы они отображались над модальным.

Проблема вызвана тем, что модал является прямым потомком элемента body, а средство выбора даты в DatePicker также является прямым потомком элемента body, поэтому они конкурируют за одно и то же пространство z-index.

Модальности начальной загрузки обычно имеют z-индекс 1000. Поэтому установка z-индекса элемента DatePicker на 1200 должна помочь, чтобы убедиться, что они также отображаются над элементами, присутствующими в модале.

Если у вашего указателя даты есть класс bs-calendar-container, ваш CSS будет выглядеть так:

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