draggable and resizeable mat-dialog in Angular 8

Question

looking for a way to be able to make a mat-dialog both draggable and resizeable. So far I have the draggable part done already using cdkDrag (DragDropModule). I have tried using resize: booth; in css but it seems as it isn't working well with combined with draggable functionality. I.e. if i remove the cdk the resizable works and vice versa.

See code here: https://stackblitz.com/edit/angular-vp8xt7

Storms

Answer 1

In your StackBlitz, a resize handle appears bottom right of the dialog, hence you're almost there. The problem is that mouse events are consumed by the dragging functionality and not handed over to the resizing functionality.

Adding a cdkDragHandle to the h1 element solves your problem.

<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>

Shee how it workes on your forked StackBlitz.

Custer

Hello @uminder, Thank you.It will help to my app.Can we Drag the modal without restrict the area (whole modal should be dragable)and at the same time It should be resizable.Can we do that? How? – Nosology

Answer 2

For resizeable mat dialog component:

use css for panel class like this..

.custom-mat-dialog-panel .mat-dialog-container { 
  resize: both;
}

ts file:

openDialog() {
    this.dialog.open(HelloComponent,{height:'100px',width:'100px', panelClass: 'custom-mat-dialog-panel'});
}

For draggable mat dialog component:

<div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
 Draggable Title
</div>

Softfinned

Answer 3

I had the same requirements and problems.

For Angular 13 this works for me:

Global CSS-File:

.resizable-mat-dialog-panel {
  resize: both;
  overflow: auto;
  max-width: unset !important;
  max-height: unset !important;
  position: absolute !important;
}

TS File with openDialog:

openDialog() {
    this.dialog.open(TestComponent,{height:'100px',width:'100px', panelClass: 'resizable-mat-dialog-panel'});
}

Dialog HTML:

<h1 cdkDrag
    cdkDragRootElement=".cdk-overlay-pane" 
    cdkDragHandle>
    Test header
</h1>
...

Without position: absolute, full resizing is not possible. Therefore, if you move the dialog from the center to the left and then attempt to resize it to the right, it will halt. When position: absolute is applied, this issue does not occur.

Spotty