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!
MatDialog creates modal dialogs that implements the ARIA role="dialog" pattern by default. You can change the dialog's role to alertdialog via MatDialogConfig . You should provide an accessible label to this root dialog element by setting the ariaLabel or ariaLabelledBy properties of MatDialogConfig .
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;
}
}
}
For me works:
.mat-dialog-override {
mat-dialog-container {
display: flex;
flex-direction: column;
mat-dialog-actions {
margin-top: auto;
}
}
}
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With