如何在 Angular 7 中调整 Angular Material Dialog 的大小? [英] How to make Angular Material Dialog re sizable in Angular 7?

问题描述

我正在使用 angular material dialog 和 AngularJS 7.我可以拖动对话框，但我想让该对话框调整大小，以便用户可以将其调整为他想要的大小.

I am using angular material dialog and AngularJS 7. I am able to drag the dialog but I want to make that dialog re sizable so that used can resize it to what ever the size he wants.

    const dialogRef = this.dialog.open(DialogCompComponent,{data : "hello"});
      dialogRef.afterClosed().subscribe(result => {
        console.log(`Dialog closed: ${result});
    });

其中DialogCompComponent是对话框内容组件.如何使这个有角度的材质对话框重新调整大小?

Where DialogCompComponent is the dialog content component.How to make this angular material dialog re-sizable?

推荐答案

根据我的经验，您可以覆盖覆盖包装器、对话框容器的 ma​​x-width 属性并定义 resize>.你应该以这样的方式结束:

From my experience, you can overwrite max-width properties of overlay wrapper, dialog container and define resize. You should end with something like that:

.cdk-overlay-pane{
  width: unset !important;
  height: unset !important;
  max-width: 100% !important;
}

.mat-dialog-container{
  max-width: 100%;
  max-height: 100% !important;
  resize: both;
}

尝试重现它:https://stackblitz.com/edit/angular-material-dialog-resize-vbom8f?file=src%2Fstyles.css

有效，但仅适用于 !important 声明.尝试使用您的代码以找到不使用它的解决方法.我相信您知道，!important 不是最佳的 CSS 实践.

Works, but only with !important statement. Try to play with your code to find a workaround to not use it. I'm sure you know, that !important isn't the best CSS practice.

这篇关于如何在 Angular 7 中调整 Angular Material Dialog 的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！