CODEWITHSUNDEEP
htmlcssangularangular-material
Dharmesh
Dharmesh

Reputation: 6003

How to increase automatic height of matdialogbox in angular 5?

  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)

enter image description here

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

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

enter image description here

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)

enter image description here

Upvotes: 9

Views: 39823

Answers (4)

Jesper
Jesper

Reputation: 2814

Add a class to your dialog:

uploadFiles(): void {
 const dialogRef = this.dialog.open(AddNewFilesOrImagesComponent, {
   panelClass: 'myClass',
 });
}

Then add the following style to the class in your CSS:

.myClass {
  max-height: 95%;
  width: 620px;
  overflow-y: auto;
}

Upvotes: 2

Martin Staufcik
Martin Staufcik

Reputation: 9492

The default max height of content of material dialog is 65vh. It can be increased by styling .mat-dialog-content

::ng-deep {
    .mat-dialog-content {
        max-height: 90vh;
    }
}

Upvotes: 2

Ganesh
Ganesh

Reputation: 6016

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'
    });
 }

Upvotes: 29

RidRoid
RidRoid

Reputation: 961

The dialog does automatically adapt to the content as long as its html is wrappend inside mat-dialog-content. :

<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>...>
<div mat-dialog-actions>...>

Upvotes: 4

Related Questions