Здравствуйте, у меня проблема с просмотром с использованием angular 4 и bootstrap 4. Когда я нажимаю открыть, чтобы показать календарь. Это видно за моим модальным. Я хочу изменить z-index в его классе, но у меня нет доступа к классу, потому что он создается автоматически. Как я могу исправить проблему? Это мой код. Заранее спасибо.
Mat-datepicker-toggle отображается за модальным
Ответы (1)
Проблема в том, что bootstrap-modal устанавливает z-index:1050
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
Средство выбора даты материала устанавливает z-index: 1000
при создании ckd-overlay-pane
.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
z-index: 1000;
display: flex;
max-width: 100%;
max-height: 100%;
}
Добавление этого в таблицу стилей вашего компонента должно помочь... но это будет применяться ко всем средствам выбора даты во всем вашем проекте.
Вам нужно будет включить пользовательский идентификатор класса, чтобы сделать его специфичным для вашего модального средства выбора даты, если вы хотите изменить только его.
::ng-deep .cdk-overlay-container mat-datepicker-content{ z-index:2000; }
Пожалуйста, обратитесь к ответу на этот вопрос SO, почему использование ::ng-deep
допустимо до дальнейшего уведомления.
Что использовать вместо ::ng-deep
person
Marshal
schedule
28.11.2018
Спасибо за ваш ответ, но все та же проблема! :/
- person Fatim; 29.11.2018
Привет @Marshal, наконец-то это сработало с использованием ::ng-deep .cdk-overlay-container{ z-index:2000; }. Спасибо
- person Fatim; 29.11.2018
Когда я добавил это. Моя вкладка с z-index 1050 начинает мерцать очень быстро.
- person Jesse; 21.04.2020
Это работает и для меня
::ng-deep .cdk-overlay-container { z-index:2000; }
- person Alex Guerreiro; 10.08.2020