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 #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