Как переместить элемент с абсолютным позиционированием на передний уровень приложения? (Угловая версия 17)
Думаю, у меня проблема со слоями макета.
У меня есть компонент mat-dialog, внутри которого есть форма с выбором (сделанная на заказ, а не mat-select). Раскрывающийся список выбора имеет абсолютную позицию, но он все еще обрезается мат-диалогом.
То же самое происходит и с мат-вкладками.
Я пытался поиграть с переполнением и z-индексом, но, поскольку я на самом деле не понимаю причину проблемы, я не могу ее исправить вслепую.
Ожидаемый результат:
- нет прокрутки в мат-диалоге, связанном с открытым раскрывающимся списком, но с возможностью показать себя, если в форме будет больше контента;
- Выпадающий список отображается с высотой в соответствии с его стилями, выходя за пределы контейнера.
Кто-нибудь знает бэкдор для решения этой проблемы?
@NarenMurali, нет, это просто пользовательский выбор, сделанный из элементов div с абсолютным позиционированием (устаревший код). Стоит ли мне попробовать ng-select или выбор материала?
предпочитаю выбирать материал, причина указана в моем ответе ниже.
Ответы 2
Когда вы создаете диалог mat, вы можете указать PanelClass. Если этот pannelClass, например. custom-pop-up вы можете добавить в style.scss что-нибудь вроде
.custom-pop-up .mat-mdc-dialog-surface{
overflow-y:visible;
}
Это изменение переполнения (из-за дефекта auto)
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
panelClass:'custom-pop-up', //<--this
data: {....},
});
см. stackblitz (когда в фокусе отображается большой элемент div)
Поскольку вам нужна полоса прокрутки внутри диалогового окна, раскрывающийся список должен быть размещен в корне HTML-кода, поэтому самым простым вариантом будет это.
Предпочитаю выбор материала, второй вариант — ng-select, но, на мой взгляд, у материала лучшее сообщество и лучший вариант.
Спасибо за ответ. Мне помогло решение использования выбора материала.
Вы можете сделать видимым снаружи один из двух, полосу прокрутки или раскрывающийся список, но не оба, а также поделиться библиотекой, которую вы использовали для выбора, не так ли
ng-select?