angular material dialog mat-dialog-actions position

Question

I'm using Angular Material Dialog component, with mat-dialog-content and mat-dialog-actions to display a footer with action buttons.

If I set a height of the dialog (e.g 80%), the dialog-actions is weirdly higher than the default.

Here is a forked stackblitz of an official example

I just set height: 80%

const dialogRef = this.dialog.open(DialogContentExampleDialog, {
  height: '80%',
  width: '520px'
});

Here is the result:

In my opinion that's an issue :) but what's your opinion? Is it possible to easily fix it?

Thanks!

Optimist

Are there any news on this? I would be interested, too – Borman

Answer 1

Github issue tracking this https://github.com/angular/components/issues/4609

Contains cleaner fix (no magic numbers) of DanielHabenicht https://github.com/angular/components/issues/4609#issuecomment-528865962

// app.module.ts
import {MAT_DIALOG_DEFAULT_OPTIONS} from '@angular/material';
...
providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {panelClass: 'mat-dialog-override'}}
]
...


// overrides.scss or styles.scss
// This fixes https://github.com//issues/4609
.mat-dialog-override {
  height: 0px;
  mat-dialog-container {
    > :first-child {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    mat-dialog-content,
    div[mat-dialog-content] {
      flex-grow: 1;
      max-height: unset;
    }
  }
}

Thorium

This should be the accepted answer. No magic numbers – Rosebud

Adding this in case someone visits the thread- I had the exact same issue as the OP and this suggestion solved it. However, don't know if it's because of my current Material version but I didn't need to include the MAT_DIALOG_DEFAULT_OPTIONS in the App module- simply pasting that cssblock and the adding the variable 'panelClass: mat-dialog-override' on the Dialog open configuration options was enough – Bigamist

Answer 2

You can "stretch" your mat-dialog-content.

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content style="height: calc(100% - 96px);">     <-- height of dialog minus title and actions height
  <p>What's your favorite animal?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

Googly

yep i've exactly done your way, I just don't like that magic number in the calc... Didn't find a better solution so far. – Optimist

Really nice solution. Works really well! Although it is a strange behavior of mat-dialog that I have to hack it that way to get the buttons sticked to the bottom of the dialog. – Trachytic

Answer 3

For me works:

.mat-dialog-override {
  mat-dialog-container {
    display: flex;
    flex-direction: column;

    mat-dialog-actions {
      margin-top: auto;
    }
  }
}

Septal

Answer 4

The solution of @JuNe works really well and is fully responsive. The only thing I have to add is the little tweak I needed to get this working. I had to explicitly set the max-height of mat-dialog-content to unset:

style="height: calc(100% - 96px);max-height: unset"

Trachytic

Answer 5

You set your mat-dialog-actions with style="position: relative; top: 5rem;" for example. The value top can variable depending height your modal.

Gowk

While this solution might make the button appear in the correct position, it doesn't give up the free space for mat-dialog-content. Not recommended if you want an element that should take up 100% of your mat-dialog-content height – Kanter

Answer 6

<div mat-dialog-actions style="box-sizing: border-box"> worked for me!

Kg

Answer 7

Because we wrap our title, content and actions in a form, this will fix the sticky footer issue with a minimal height for our project:

app.module.ts

import {MAT_DIALOG_DEFAULT_OPTIONS} from '@angular/material';
...
providers: [{
  provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {
    panelClass: 'mat-dialog-override',
    hasBackdrop: true, // enable Backdrop
    disableClose: true // disable click and escape for closing
  }
}]
...

html:

<ng-template #dialog>
  <form>
    <div mat-dialog-title>Title</div>
    <div mat-dialog-content>...</div>
    <div mat-dialog-actions>...</div>        
  </form>
</ng-template>

scss:

.mat-dialog-override {
  mat-dialog-container {
    display: flex;
    flex-direction: column;

    > :first-child {
      height: 100%;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    [mat-dialog-content] {
      flex-grow: 1;
      max-height: unset;
    }
  }
}

We use the material attributes to mark the html elements.

Cassirer

Answer 8

I have been looking for a solution but didn't find anything. So I get an idea to make this happen. Actually, this solution worked in my case, and I just wanted to share, maybe it will help you.

<div class="d-flex flex-column">
  <div>
    <h2 mat-dialog-title>Install Angular</h2>
  </div>
  <div>
    <mat-dialog-content class="mat-typography">
      some content
    </mat-dialog-content>
  </div>
  <div style="bottom: 0; position: absolute; width: 100%;">
    <mat-dialog-actions align="end" >
      <button mat-button mat-dialog-close>Cancel</button>
      <button mat-button [mat-dialog-close]="true">Install</button>
    </mat-dialog-actions>
  </div>
</div>

I used "flex" to order all my div tags, and after that styling, the last div (action button section) gave me this result.

I hope it will help those who are looking for a solution.

Torse