Question

我正在尝试以固定宽度水平居中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选择器，但我没有得到想要的结果。

我错过了什么？有没有办法配置Overlay的{{1}}？

Answer 1

在尝试使用材料内部类MatDialogContainer用于我自己的目的之后，我设法摆脱了MatDialog并且我能够使用parametrable 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%)'，即使丑陋，也像魅力一样，最终得到了预期的结果

水平居中MatDialog，宽度为100％，固定maxWidth

1 个答案: