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.

Answer 1

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

Stackblitz

Answer 2

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

Answer 3

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