How to increase automatic height of matdialogbox in angular 5?

Issue

  uploadFiles(): void {
    const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
      width: '620px',
      height : '100%',
    });
  }

if height 100 % UI looks like this(under upload button not necessary empty spaces)

if I put fix height in px(it makes UI scrollable)

  uploadFiles(): void {
    const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
      width: '620px',
      height : '250px',
    });
  }

I want actual this type if I SELECT File it automatic increase its height(when i choose image that time i want to increase automatic height of matdialogbox)

Solution

Try this, it will take complete height of the page for your matdialog

 uploadFiles(): void {
   const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
        width: '100%',
        minHeight: 'calc(100vh - 90px)',
        height : 'auto'
    });
 }

Answered By - Ganesh