MatDialog mat-dialog-actions is not at the bottom of the dialog

[ashishdoneriya]

Bug:

Angular Material is not placing md-dialog-actions at the bottom

What is the expected behavior?

Should be at the bottom

What is the current behavior?

Currently, it is placed just after md-dialog-content

What are the steps to reproduce?

Add md-dialog-actions Providing a Plunker (or similar) is the best way to get the team to see your issue. Plunker template: https://plnkr.co/edit/S2D0g6NOPpVRYoc6KA7L?p=preview

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular 4, material ^2.0.0-beta.5, os ubuntu 16.04, typescript ~2.0.3, browser : chrome

[jelbourn]

@crisbeto looks like this happens when explicitly setting a height on the dialog

[beazergood]

Oh this is for ng2, same is happening for me using material 1.1.3

[rthewhite]

I can confirm it indeed seems to occur the moment you set a specific height on the dialog. The moment you specify an height (in my case 65%) the title and actions don't stay fixed in place and there are 2 scrollbars. See:

https://plnkr.co/edit/1Vn3D3E2ozdO80rLlleS?p=preview

[rthewhite]

Also duplicate of https://github.com/angular/material2/issues/4053

[ChenReuven]

Is there any news about this issue?

thanks

[pauloapi]

Any news?

[Chris2011]

The other ticket points to this ticket :D but I can't see any solution(?)

[atrombet]

I have found this to work as a temporary fix when explicitly setting height on a MatDialog.

my-dialog.component.html:

<div class="fixActionRow">
    <h1 mat-dialog-title></h1>
    <div mat-dialog-content></div>

    <div class="spacer"></div>

    <div mat-dialog-actions></div>
</div>

my-dialog.component.css:

.fixActionRow {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.spacer {
  flex-grow: 1;
}

[stephengardner]

Is this a feature instead of a bug? Are we intended to replicate this ourselves? This issue has been open a longgg time

[fergalddaly]

not specifying the height worked for me.

[vinagreti]

Is there any update about this issue? @jelbourn

[ashishdoneriya]

Material 2 is hopeless. Switched to Vuejs for Vuetify

[Chris2011]

Please reopen the bug ticket, it was not implemented and to say moving to vue will not resolve the ticket. @ashishdoneriya if you are not interested anymore in it, fine, but leave it open for everyone else. Thx.

[ashishdoneriya]

@Chris2011 ok chris

[vinagreti]

My experience:

Bug, feature request, or proposal: Bug

What is the expected behavior? Actions to be at the bottom of the dialog

What is the current behavior? Actions right after content

What are the steps to reproduce? StackBlitz starter: https://stackblitz.com/edit/angular-cuikyx

Which versions of Angular, Material, OS, TypeScript, browsers are affected? angular@6.1.6, material@6.4.7, any browser and any OS

[vinagreti]

@crisbeto I saw that you are working on dialog fixes. Could you please tell us if this issue will be fixed? It was opened more than a year ago and nothing has been done. Thanks a lot!!!

[simeyla]

There really really needs to be a better way to specify different dialog scaling strategies beyond the existing positioning strategies (such as full screen with an optional margin). Then problems like this would go away.

I expect the primary reason to set height on a dialog in the first pace is to make it stretch, or stop it overflowing the page. The number one thing a dialog control should do it take the burden of sizing away from me!

[0xDones]

Any news or workaround for this? @atrombet's solution didn't work for me. =(

[manklu]

@dpolicastro https://stackblitz.com/edit/angular-cuikyx-pnx9we

[0xDones]

Thanks @manklu, I faced some issue trying to make it work on my project, and noticed that using minHeight property was not enought, you have to set the height. So the solution that @atrombet proposed works properly.

const dialogRef = this.dialog.open(MyDialog, {
      width: '80%',
-      minHeight: '500px',
+      height: '80%'
 });

[curiouscod3]

This issue(double scroll(container & content area)) has happened when I set height explicitly !!

const dialogConfig: MatDialogConfig = {
      panelClass: 'my-panel',
      maxWidth: '50vw',
       maxHeight: '70vh',

      width: '30vw',
      height: '30vh'
    }

[etonyali]

I have found this to work as a temporary fix when explicitly setting height on a MatDialog.

my-dialog.component.html:

<div class="fixActionRow">
    <h1 mat-dialog-title></h1>
    <div mat-dialog-content></div>

    <div class="spacer"></div>

    <div mat-dialog-actions></div>
</div>

my-dialog.component.css:

.fixActionRow {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.spacer {
  flex-grow: 1;
}

This worked very well. However, there was still a gap from the mat actions' top part between content and actions when I made height 95%. I resolved this with adding: .mat-dialog-content { max-height: 100%; }

[JrmyDev]

I think problem is cause by mat-dialog-content max height set to 65vh...

Resolved with :

.mat-dialog-content {
    max-height: initial !important;
}

[vinagreti]

@JrmyDev this worked well. you can see it in action here https://stackblitz.com/edit/angular-cuikyx-7vewfm

[etonyali]

I think problem is cause by mat-dialog-content max height set to 65vh...

Resolved with :

.mat-dialog-content {
    max-height: initial !important;
}

Issue I am having with that is when I set encapsulation: ViewEncapsulation.None, it messes up. However max-height: 100%; works without an issue.

[DanielHabenicht]

To sum up for everybody looking for a clean solution, that is maintainable and can be removed once this is fixed:

// 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/angular/components/issues/4609
.mat-dialog-override {
  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;
    }
  }
}

Stackblitz: https://stackblitz.com/edit/angular-gjeekg For Debugging this Bug: It only appears if the height of the Dialog is explicitly set via minHeight or height.

[leandro-hl]

two years talking about it and posting solutions in comments instead of fixing it... :(

[lekha-badarinath]

Yes, please fix this. Workarounds are fine, but it is a lot more time saving if it comes placed correctly out of the box. :(

[rockResolve]

As @dpolicastro mentioned none of these solutions work if only minHeight and not height) is set.

[breket]

Hey guys! Time to fix it! Every workaround makes my code just ugly...

[rockResolve]

I refined the above work of @DanielHabenicht to handle minHeight.

helper my-dialog.component.css:

// HACK Work around for Angular Material bug
// Setting height or min-height placed .mat-dialog-actions immediately below mat-dialog-content
// It should be at the bottom.
// Issue & fix https://github.com/angular/components/issues/4609
// Below css requires code to fix min-height.
// Search 'DIALOG MIN HEIGHT' for paired code fix
mat-dialog-container {
  display: block;
  height: 100%;

  .my-dialog {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: inherit;
  }

  .mat-dialog-title {
    display: block;
  }

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

paired with helper dialog.service.ts:

  showDialog<T, D = any, R = any>(
    componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
    config?: MatDialogConfig<D>
  ) {
    return this.dialog.open(
      componentOrTemplateRef,
      createConfig(config)
    );
  }

  private createConfig(config: MatDialogConfig<any> | undefined) {
    return {
      // First Default settings
      width: '570px',

      // minHeight: '300px',
      // Remove mat-dialog-container padding 48px so it can be inherited by
      // mat-dialog-container first child. Inherit makes mat-dialog-container
      // first child too high by padding.
      // So calculate as 300px - 48px of mat-dialog-container padding
      // Search 'DIALOG MIN HEIGHT' for paired css fix
      minHeight: '252px',

      disableClose: true,

      // Then User settings
      ...config
    };
  }

To make the height & minHeight property values pass down to the dialog body's container, each parent (i.e. my-dialog) between it and ancestor mat-dialog must pass them through e.g. ...

dialog instance component my-confirm-dialog.component.scss

my-confirm-dialog {
  height: 100%;
  min-height: inherit;
}

and set viewEncapsulation none with my-confirm-dialog.component.ts

@Component({
  selector: 'my-confirm-dialog',
  templateUrl: './my-confirm-dialog.component.html',
  styleUrls: ['./my-confirm-dialog.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MyConfirmDialogComponent implements OnInit {

[Mgiannig]

Any news? Definitely moving to react or vue, tired of this WorkAroungular life

[vinagreti]

@austinkulp It isn't a framework. It is only a lib and has nothing to compare with Vue. But, it is really a shame they still didn't fix it.

[alekplay]

@DanielHabenicht this is great, but it seems to remove my backdrop... 🤔 Upon removing the override the backdrop returns. Any idea how these are correlated?

EDIT: Seems as though overriding the panelClass also overrides all the other default values, including hasBackdrop. This fixes it:

{ provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { panelClass: 'mat-dialog-override', hasBackdrop: true }}

[jurgh1]

For me,

.mat-dialog-content {
  height: 100%;
}

did the trick, when I have a set dialog height

const dialogConfig = new MatDialogConfig();
dialogConfig.height = '80%';

[skwiotek]

Hello, is there any work on it from Angular developers? It is shown here that it is a known bug and a requested important feature. Please help. Maybe with a good workaround... !? Thanks!

[zdenek-horak]

The proposed fix didn't worked for me. Following code solved my case (when specifying height: '85vh' in this.dialog.open):

.mat-dialog-content {
  max-height: initial!important;
  height: calc(100% - 52px);
}

.mat-dialog-container {
  max-height: 90vh;
}

[SadiinsoSnowfall]

The bug is still present in Angular Material 13 😕

[ChelseaChilders]

Leaving a comment to note that this is still a popular issue that devs want fixed please. Work-arounds are ugly.

[SelectiveHouse]

Also jumping on here to be annoying and say this bug is still present

[lacamilla]

Using Angular 13. If I don't set the height of the dialog component then the dialog's action buttons are nicely positioned at the bottom of the dialog. However, when internal dialog's content changes size (say, tabs and each tab is different height) then the whole dialog window is resizing depending on the content. This is quite frustrating UX, so I'd have fixed the height of the dialog. With this, I get another issue, this time UI related, the action buttons sometimes end up in the middle of the dialog. The whole situation cannot be helped with the fact that styling dialogs without turning off viewEncapsulation isn't possible.

[JanBA1990]

Also jumping on here to be annoying and say this bug is still present

Joining the queue. The proposed solutions in the comments are not satisfying at all.

[AlonsoK28]

Some fix for this ?

My project dependencies:

"@angular/material": "^14.0.3"

[bardus-hobus]

It is now 5 years, and this is still an issue.

[shprink]

If you don't want to wait another 5 years to fix your issue here is what works for me with a fullscreen dialog:

open dialog config:

this.dialog.open(YourDialog, {
      maxWidth: '90vw',
      maxHeight: '90vh',
      width: '90vw',
      height: '90vh',
    });

modal style

      [mat-dialog-content] {
      // 32px is mat-dialog-title height
      // 68px is mat-dialog-actions height
        max-height: calc(100% - 32px - 68px); 
      }

[gitprzemek]

There is simpler css workaround for that, without adding additional html elements.

In your component html:

<section class="dialog-container">
  <div mat-dialog-title></div>
  <div mat-dialog-content></div>
  <div mat-dialog-actions></div>
</section>

In your scss file for that component:

::ng-deep .mat-dialog-container {
  display: flex;
}
.dialog-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.dialog-container .mat-dialog-content {
  flex-grow: 1;
}

[jsmalme]

Who knew getting the modal action buttons to line up on the bottom of the page would be such a challenge? I guess I'll just use a bootstrap modal or something.

[NikolayNN]

It works for me

<h2 mat-dialog-title>Title</h2>
<mat-dialog-content></mat-dialog-content>
<mat-dialog-actions></mat-dialog-actions>

:host {
  height: 100%;
  display: flex;
  flex-direction: column;
}

mat-dialog-content {
  flex-grow: 1;
}

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

stackblitz

[Spartbrine]

It still happening at Angular 18? Im with that error at Angular 15

[victor314159]

Still hitting that bug with Angular 18...