css - 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,

question from:https://stackoverflow.com/questions/66049713/how-to-define-the-size-of-a-material-dialog-box-in-angular

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.