javascript - How to make Angular Material Dialog re sizable in Angular 7?

Question

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});
    });

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

Answer 1

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;
}

Tried to reproduce it: https://stackblitz.com/edit/angular-material-dialog-resize-vbom8f?file=src%2Fstyles.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.