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

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

Answer 2

我确实有同样的问题。
答案有点晚，但我发布此答案对可能需要此答案的人有所帮助。

根据@Derek Schmid的答案，

  let dialogConfig = new MatDialogConfig();

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

现在我正在使用此配置集。
宽度，minWidht，maxWidht是您的选择。

重点是将“ maxHeight”设置为“ 100vh”，而不设置“ height”属性的值。

这对我有两点作用。

1）它不是全屏显示，所以我仍然可以使用对话框视图的值（在大多数情况下）。
2）在小屏幕尺寸（高度，如手机）上，整个mat-dialog和mat-dialog-content部分都可以滚动（不仅仅是mat-dialog-content部分）。

尝试一下：）

Answer 3

垫对话框期望标题和动作适合在一行中。如果在用例中标题和/或操作跨越了更多行，则您可能希望将它们全部放入内容中，并避免完全使用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>

角材料。对话动作在行动装置上显示在萤幕外

3 个答案: