时间戳

首页 > 解决方案 > 角材料。移动设备屏幕外的对话框操作

angular - 角材料。移动设备屏幕外的对话框操作

问题描述

我在移动设备上遇到 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 全屏模式下没有这个问题，也许可以在全屏模式下打开移动设备上的对话框？任何建议将不胜感激）。

标签： angularsassangular-material2

解决方案

我做了一些搜索，看起来让对话框全屏可能是一个很好的解决方案（http://answersicouldntfindanywhereelse.blogspot.com/2018/05/angular-material-full-size-dialog-on.html）。我知道这会影响对话的效果，但我注意到如果你不能使内容更小，它们在移动设备上可能会很棘手。您可能还想查看https://github.com/angular/material2/issues/10094

推荐阅读