angular material dialog is not responsive


I am using Angular material dialog below is code I have written to open dialog wherein I am passing configurations:


let dialogBoxSettings = {
  height: '300px',
  width: '500px',
  disableClose: true,
  hasBackdrop: true,
  data: mission.config

const dialogRef =

I have passed width and height to dialog box but when I resize my browser window the dialog shifts to left side of window.


import { Component, Inject, OnInit,HostListener } from "@angular/core";
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { Subscription } from "rxjs/Subscription";

declare let jQuery: any;
  selector: "dialog-box",
  templateUrl: "./dialog-box.component.html",
  styleUrls: ["./dialog-box.component.css"]
export class DialogBoxWidgetComponent implements OnInit {
  title: string = "Title";
  heading: string = "Heading";
  type: string = "userInput;";
  buttons: any;

  public dialogConfig: any;

  subscription: Subscription;

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

  closeDialog() {

  ngOnInit() {
    this.dialogConfig =;
    this.title = this.dialogConfig.title;
    this.heading = this.dialogConfig.heading;
    this.type = this.dialogConfig.type;
    this.buttons = this.dialogConfig.buttons;
    jQuery(".cdk-overlay-container").css("z-index", 99999);
      "border-radius": "7px"


<h1 matDialogTitle>{{title}}</h1>

<div (click)="closeDialog()" style="position: relative;">
    <button class="close" mat-dialog-close></button>

<div mat-dialog-content>{{heading}}</div>
<div mat-dialog-actions *ngIf="type == 'userInput'">
      <button *ngFor="let item of buttons" [ngClass]="item.type=='button'?'mat-dialog-btn':'mat-dilalog-btn-link'" mat-button matDialogClose="{{item.value}}">{{}}</button>

What is wrong with my implementation? If I do not give width and height to dialog then it adjust fine when I resize window.


you can try by adding margin: 0 auto; to your dialog setting:

let dialogBoxSettings = {
  height: '300px',
  width: '500px',
  margin: '0 auto',
  disableClose: true,
  hasBackdrop: true,
  data: mission.config

Answered By – Fateme Fazli

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.