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

问题描述

我正在使用 Angular材质对话框和 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?

推荐答案

根据我的经验，您可以覆盖叠加层包装，对话框容器的最大宽度属性，并定义调整大小 >.您应该以这样的结尾:

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对话框的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！