[Fixed] draggable and resizeable mat-dialog in Angular 8

Issue

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

Solution

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.

Leave a Reply

(*) Required, Your email will not be published