How to define the size of a Material Dialog box in Angular

Question

thank you for reading.

I have been attempting to open a dialog box with a set size. Ideally being 90% in width, however I am having trouble doing so. Could anyone point me in the right direction (or just tell me the answer).

I believe it has to be set in the call to open the box which is as follows:

  readMe({title,img,date,content}:Blog):void{
const dialogConfig = new MatDialogConfig();
dialogConfig.data = {
  title,
  img,
  date,
  content,
};
const dialogRef=this.dialog.open(BlogPostComponent,dialogConfig);

}

Thanks in advance,

Answer 1

You can add width and height properties to your dialogConfig, ie

dialogConfig.width = '300px';
dialogConfig.height = '200px';

There's also maxWidth and maxHeight properties if necessary, see the docs.

Answer 2

Following on from Aldin Bradaric's answer here is the updated code I am now using

  readMe({title,img,date,content}:Blog):void{
const dialogConfig = new MatDialogConfig();
dialogConfig.minWidth="75%";
dialogConfig.data = {
  title,
  img,
  date,
  content,
};
const dialogRef=this.dialog.open(BlogPostComponent,dialogConfig);

}