CODEWITHSUNDEEP
angularmodal-dialog
kcttt
kcttt

Reputation: 69

How to change the position of modal dialog box?

I am working on Angular 4 project and I have created a modal dialog box using Angular material. But the dialog box appears in the left side bottom of a page. How can I place the modal dialog in the middle of a page.

This is open dialog method. I called openDialog() method in another method.

openDialog() {

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  panelClass: 'my-centered-dialog',
  width: '450px',
  height: '250px',
});

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
});
}

This is DialogOverviewExampleDialog class.

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

Upvotes: 2

Views: 10143

Answers (1)

Anshuman Jaiswal
Anshuman Jaiswal

Reputation: 5462

You can set position of dialog by passing position in config as:

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  panelClass: 'my-centered-dialog',
  width: '450px',
  height: '250px',
  position: {top: '20px'}
});

Here you can find more info regarding position

Also if you don't pass position it will be centred to the screen. Probably you are overriding any style in my-centered-dialog class. Just try by removing this panelClass

Upvotes: 9

Related Questions