问题描述
我正在使用 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?
推荐答案
根据我的经验,您可以覆盖覆盖包装器、对话框容器的 max-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 的大小?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!