时间戳

首页 > 解决方案 > MatDialog 水平居中，宽度为 100%，maxWidth 固定

javascript - MatDialog 水平居中，宽度为 100%，maxWidth 固定

问题描述

我正在尝试将具有固定宽度的 MatDialog 水平居中：

let dialog = this.dialog.open(EditVisitPopupComponent,
  { data: { visit: this.visit }, width: '100%', maxWidth: '500px' });

出于某种原因，添加width参数会justify-content: flex start在我希望它保留的同时将内联添加到父叠加层justify-content: center。

我知道创建模态的方法，包括创建一个Overlay并将组件注入其中。但我不明白为什么我不能简单地使用MatDialog.

我试过的：

let dialog = this.dialog.open(EditVisitPopupComponent,
      { data: { visit: this.visit }, position: this.overlay.position().global().centerVertically().centerHorizontally(), width: '100%', maxWidth: '500px' });

但类型不匹配。

我也尝试了backdropClass一个兄弟 CSS 选择器，但我没有得到想要的结果。

我错过了什么？有没有办法配置Overlaya MatDialog？

标签： javascriptangularangular6angular-material2angular-cdk

解决方案

在尝试将材料内部类MatDialogContainer用于我自己的目的之后，我设法摆脱了MatDialog并且能够创建我自己的对话框，并Overlay在我放置position: this.overlay.position().global().centerVertically().centerHorizontally().

但我得到了完全相同的结果！

然后我阅读了GlobalPositionStrategy源代码，我发现 Angular Material 贡献者没有考虑width: 100%; max-width:...px;用例，因为有一个丑陋的

if (config.width === '100%') {
  parentStyles.justifyContent = 'flex-start';
}

然后我回滚到MatDialog解决方案并输入width: 'calc(100%)'，即使丑陋，它也像一个魅力，最终让我得到了预期的结果。

更新 v9.1.0 (01-2020)

这个错误终于被修复了，添加了一些逻辑（基于widthand ）来maxWidth确定应该包含什么。有关相关提交的更多详细信息：https ://github.com/angular/components/commit/9f2c93725e973e2c76e3308a72c5bd14f5ec483calign-itemsjustify-content

推荐阅读