Prevent MatDialog from being dragged out of the window

Question

I am currently working on an Angular project. I use the MatDialog from Angular material together with the Angular module of drag and drop. I want to prevent the dialog from being dragged outside of the screen window. Does anyone know how to do this?

Thanks in advance.

score 12 · Accepted Answer · answered Dec 22 '19 at 20:36

12

You can set cdkDragBoundary to .cdk-overlay-container which has the size of the screen.

Stackblitz

answered Dec 22 '19 at 20:36

Eldar

8,178
2
8
29

score 0 · Answer 2 · answered Dec 19 '19 at 22:27

0

Can't you set a box with the size of your screen (like an overlay) and create the drag in drog inside ? Like this example : https://stackblitz.com/angular/omronldbxey?file=src%2Fapp%2Fcdk-drag-drop-boundary-example.ts

answered Dec 19 '19 at 22:27

Jean-Bryce Beirnaert

1

score -1 · Answer 3 · answered Dec 22 '19 at 13:19

-1

You can use all the screen size for your MatDialog and then make it draggable. This link may be helpful.

answered Dec 22 '19 at 13:19

ic_paty

390
2
10

Unfortunately, this answer does not help me because I know how to make a dialog draggable and my problem is that the dialog must not be dragged outside the window. – ines Dec 22 '19 at 14:34
I think it will be more helpful if you add some code to the post or stackblitz link. – ic_paty Dec 22 '19 at 14:40

Prevent MatDialog from being dragged out of the window

3 Answers3