Угловой материал. Диалоговые действия вне экрана на мобильных устройствах
У меня проблема с mat-dilog на мобильных устройствах. На мобильных устройствах с альбомной ориентацией кнопки мат-диалог-действия находятся за пределами экрана, поэтому закрыть диалог невозможно.
Я думал о том, чтобы дублировать кнопки действий поверх диалога с помощью специального класса css, но это требует ручного добавления его в каждый отдельный диалог.
// Dialog close button for mobile devices
.dialog-close-btn {
visibility: hidden;
}
@media screen and (max-width: 799px) and (orientation: landscape) {
.dialog-close-btn {
visibility: visible;
}
}
Это работает, но, как я уже сказал, это много повторяющегося кода и ненужной работы. Может кто сталкивался с такой проблемой и есть более простое решение. Кстати, я также заметил, что в полноэкранном режиме Chrome этой проблемы нет, может быть, на мобильных устройствах можно открывать диалоги в полноэкранном режиме? Буду признателен за любой совет).
Подумал, но на устройствах с диагональю менее 7" блок мат-диалога-контента будет слишком мал и неудобен
Что есть, то есть. Это мобильное устройство в ландшафтном режиме, и вы пытаетесь отобразить диалоговое окно с кнопками в нижнем колонтитуле. Мы не можем рассказать вам, как сделать UX-дизайн вашего приложения. Angular Material не имеет каких-либо диалоговых функций для обработки этого размера экрана. Поэтому вам придется обрабатывать этот случай по своему усмотрению с помощью пользовательской логики.
Ответы 4
Я немного поискал, и похоже, что сделать диалог в полноэкранном режиме может быть хорошим решением (http://answersicouldntfindanywhereelse.blogspot.com/2018/05/angular-material-full-size-dialog-on.html). Я знаю, что это снижает эффект наличия диалога, но я заметил, что они могут быть сложными на мобильных устройствах, если вы не можете уменьшить содержимое. Вы также можете оформить заказ https://github.com/angular/material2/issues/10094
У меня была такая же проблема.
Это немного запоздалый ответ, но я публикую этот ответ, чтобы быть полезным для тех, кому это может понадобиться.
Основываясь на ответе @Derek Schmid,
let dialogConfig = new MatDialogConfig();
dialogConfig = {
width: '80vw',
maxHeight: '100vh',
};
Теперь я использую этот набор конфигураций.
ширина, minWidht, maxWidht на ваш выбор.
Дело в том, чтобы установить «maxHeight» как «100vh» и не устанавливать значение свойства «height».
Это работает для меня в двух точках.
1) Это не полноэкранный режим, поэтому я все еще могу использовать значение диалогового окна (в большинстве случаев).
2) При маленьком размере экрана (по высоте, например, на мобильных устройствах) и весь мат-диалог, и мат-диалог-контент становятся прокручиваемыми (а не только мат-диалог-контент).
Попробуйте это :)
Мат диалога предполагает, что заголовок и действия поместятся в одну строку. Если в вашем случае заголовок и/или действия занимают больше строк, вы можете захотеть поместить их все внутри контента и вообще не использовать часть mat-dialog-title.
<div mat-dialog-content class = "details">
<h1 *class = "title">{{data.title}}</h1>
<div> Your content here</div>
</div>
<div mat-dialog-actions>
</div>
Содержимое диалогового окна по умолчанию имеет стиль max-height65vh (*), что может привести к недоступному отображению действий под нижней частью экрана, если раздел заголовка или действий выше 1 строки (как @now отметил).
Это можно смягчить, применив пользовательский стиль к классу CSS .mat-dialog-content в файле стиля компонента, чтобы уменьшить максимальную высоту, выделяемую содержимому:
// In dialog-component.css
.mat-dialog-content {
max-height: 50vh;
}
Чтобы применить это в файле глобального стиля, используйте !important, чтобы принудительно переопределить стиль по умолчанию:
// In global styles.css
.mat-dialog-content {
max-height: 50vh !important;
}
(*) Это основано на Angular Material 12.2.6.
Уменьшить диалог.....