Setting a custom center for a dialog in Angular Material - css

Question

I'm trying to fix the position of my dialog in Angular. I can set or update the position using the DialogRef object or the MatDialogConfig object. When I set the left position to 25px the dialog will appear 25 pixels from left. When I do not specify a position the dialog will always appear in the center. Unfortunately, I'm using a sidenav which is 250px wide. So I would like my dialog to be positioned at the center + 250px. How do I approach this problem?
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
dialogConfig.disableClose = true;
const dialogRef = this.dialog.open(TCtor, dialogConfig);
dialogRef.updatePosition({ left: "25px" });

Answer 1

You can use calc, a native css function to compute the left position of your dialog box. See more details about it.
The "less gracious" point is that you need to set the width of dialog box and use it also inside the calc computation.
So I would like my dialog to be positioned at the center + 250px
2 possible interpretations :
1) The left side of dialog box should be at center + 250px
Middle of screen: 50vw (50% of viewport width)
this.dialog.open(DemoDialogComponent, {
height: '200px',
width: '400px',
position: {
left: 'calc(50vw + 250px)'
}
});
2) Dialog is centered, but with a shift of 250px at right
Dialog box width: 400px
Middle of screen: 50vw (50% of viewport width)
this.dialog.open(DemoDialogComponent, {
height: '200px',
width: '400px',
position: {
left: 'calc(50vw - 200px + 250px)'
}
});