棱 Angular Material 。移动设备屏幕外的对话框操作

标签 angular sass angular-material2

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

最佳答案

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

关于棱 Angular Material 。移动设备屏幕外的对话框操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54422212/

相关文章:

angular - 无法从 Dialog Flow 访问客户端访问 token ,我需要在 Angular 应用程序中使用

Angular 9 Uncaught ReferenceError : regeneratorRuntime is not defined

angular - 从 Angular Material 的自动完成中获取 'id' 选定值

angular - 如何将 AM/PM 时间格式转换为 Angular 2 中的小时格式

html - 如何在不使用背景图像的情况下获得背景磨砂玻璃效果

css - 如何在现有网站上使用 SCSS

围绕 div 单击的 Angular Material 复选框

angular - 使用 Angular Material 和 Safari 从另一个对话框打开对话框

html - 带有动态变量的 SCSS 主题

Angular 4 - Material 2 - md datepicker 设置一周的第一天