Z-Index НЕ работает с диалоговым окном материала Angular
Ошибка:
Z-Index НЕ работает с диалогом материалов
Какое ожидаемое поведение?
Z-Index должен работать с диалогом материалов или диалог должен быть поверх всего остального.
Каково текущее поведение?
Диалог материалов покрывается опциями выбора, приведенными ниже.
Какие шаги для воспроизведения? https://stackblitz.com/edit/angular-gsa8kr-rkss7t?file=app/dialog-overview-example.html
- Введите текст.
- Выберите раскрывающийся список.
Скриншоты: https://postimg.cc/gallery/2i3tc2sbc/
Есть что-нибудь еще мы должны знать?
Пробные исправления CSS:
.modal__content,dialog-layout,mat-dialog-container,.mat-dialog-container,#cdk-overlay-0,.cdk-overlay-pane {
z-index: 9999 !important;
}
Ничего из этого не сработало.
Ответы 2
Элемент <select> - это элемент интерактивного содержимого в HTML. Он ведет себя как контекстное меню, вызываемое правой кнопкой мыши, и отображается над всеми элементами документа.
В вашем случае, когда вы нажимаете выбрать после ввода своего имени в поле, последовательно происходят следующие вещи:
- Вызывается событие размытия в текстовом поле, и открывается диалоговое окно.
- Откроется меню выбора.
Итак, в соответствии с последовательностью, что происходит правильно, то есть сначала открывается диалоговое окно, а затем выбор, поэтому выбор находится над диалоговым окном, что является правильным.
Но, конечно, интерфейс не кажется хорошим, когда это происходит, поэтому есть обходной путь, то есть скрыть выбор при открытии диалогового окна, а затем показать его снова, скажем, через 0,1 секунды. По мере того, как выбор скрывается, его меню скроется вместе с ним.
Я реализовал это для вас. Взгляните на этот Stackblitz: Выбрать закрытие при открытии диалога
Надеюсь, это поможет.
Добро пожаловать. Если вы считаете, что это правильный ответ, примите этот ответ как лучший, чтобы другие пользователи прочитали его.
@NabilShahid, что, если мне нужен его z-index по-разному для разных элементов, например, mat-menu идет за моим фиксированным заголовком и mat-dialog над моим фиксированным заголовком, но я не могу этого сделать, оба использовали cdk-overlay-container, поэтому я не могу установить его индекс отдельно.
Класс, содержащий оверлей matdialog, - cdk-оверлей-контейнер
Добавьте этот код в свой style.css
.cdk-overlay-container {
z-index: 9999 !important;
}
Это должно решить проблему.
Это решило мою проблему, когда я добавил :: ng-deep. Почему?
Очень хорошо. Большое спасибо за Вашу помощь! Высоко оценен.