Угловой материал.Действия диалога вне экрана на мобильных устройствах

Question

У меня проблема с mat-dilog на мобильных устройствах.На мобильных телефонах с альбомной ориентацией кнопки mat-dialog-actions находятся за пределами экрана, поэтому закрыть диалог невозможно.

Я думал о дублировании кнопок действий в верхней части диалога с помощью специального класса 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 такой проблемы нет, может быть, есть возможность открывать диалоги на мобильных устройствах в полноэкранном режиме?Был бы признателен за любые советы).

Answer 1

У меня была такая же проблема.
Ответ немного запоздал, но я публикую этот ответ, чтобы он был полезен тем, кому это может понадобиться.

На основании ответа @Derek Schmid,

  let dialogConfig = new MatDialogConfig();

  dialogConfig = {
    width: '80vw',
    maxHeight: '100vh',
  };

Теперь я использую этот набор настроек.
width, minWidht, maxWidht - ваш выбор.

Суть в том, чтобы установить maxHeight как 100vh и не устанавливать значение свойства height.

Это работает для меняв двух точках.

1) Это не полноэкранный режим, поэтому я все еще могу использовать значение диалогового окна (в большинстве случаев).
2) При небольшом размере экрана (по высоте, как у мобильного телефона),Вся часть mat-dialog и mat-dialog-content становится прокручиваемой (не только часть mat-dialog-content).

Попробуйте это:)

Answer 2

Я провел некоторый поиск, и похоже, что создание диалогового окна в полноэкранном режиме может быть хорошим решением (http://answersicouldntfindanywhereelse.blogspot.com/2018/05/angular-material-full-size-dialog-on.html). Я знаю, что это устраняет эффект наличия диалога, но я заметил, что они могут быть хитрыми нана мобильный, если вы не можете сделать контент меньше. Вы также можете оформить заказ https://github.com/angular/material2/issues/10094