我正在使用Angular Material Dialog component,具有mat-dialog-content和mat-dialog-actions来显示带有操作按钮的页脚。
如果我设置对话框的高度(例如80%),则对话框动作比默认值高。
Here is a forked stackblitz of an official example
我刚刚设置了高度:80%
const dialogRef = this.dialog.open(DialogContentExampleDialog, {
height: '80%',
width: '520px'
});
这是结果:
我认为这是一个问题:)但是您有何看法?是否可以轻松修复它?
谢谢!
答案 0 :(得分:2)
Github跟踪此https://github.com/angular/components/issues/4609
的问题包含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;
}
}
}
答案 1 :(得分:0)
您可以“拉伸”您的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>
答案 2 :(得分:0)
@JuNe的解决方案效果很好,并且响应迅速。我唯一需要添加的就是我需要进行一些微调才能使其正常工作。我必须明确设置 mat-dialog-content 的最大高度为未设置:
style="height: calc(100% - 96px);max-height: unset"
答案 3 :(得分:0)
例如,您将 mat-dialog-actions
设置为 style="position: relative; top: 5rem;"
。
值 top
可以根据模态的高度变化。