It is crazy but the following code:
import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MatDialogConfig, MAT_DIALOG_DATA } from '@angular/material';
@Component({
selector: 'decline',
templateUrl: './decline.component.html',
styleUrls: ['../../../styles/main.css']
})
export class DeclineComponent {
animal: string;
name: string;
config: MatDialogConfig = {
disableClose: false,
hasBackdrop: true,
backdropClass: '',
width: '250px',
height: '',
position: {
top: '',
bottom: '',
left: '',
right: ''
}
};
constructor(public dialog: MatDialog) { }
openDialog(): void {
let dialogRef = this.dialog.open(DialogOverviewExampleDialog, this.config);
}
}
@Component({
selector: 'dialog-overview-example-dialog',
template: `
This is nothing
`
})
export class DialogOverviewExampleDialog {
constructor(
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>) { }
}
does not center (horizontally and vertically) the modal window whereas in all examples I have seen so far, it is nicely centered. I cannot find the problem...
I have to say that I am using '~@angular/material/prebuilt-themes/indigo-pink.css"
. Apart from that, I tried to center it manually by adjusting the position object inside config. However it does not accept something like left: '50%-125px'
. Any good ideas, please?