web-dev-qa-db-ja.com

angular素材ダイアログマットダイアログ位置

Angular Material Dialog Component を使用しています。

ダイアログの高さを設定した場合（例えば80％）、ダイアログアクションはデフォルトより奇妙に高くなります。

ここは公式の例の分岐スタックブリッツです

身長を設定しました：80％

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

これが結果です。

enter image description here

私の意見では問題です:)あなたの意見は何ですか？簡単にそれを修正することは可能ですか？

ありがとう！

angularangular-materialmodal-dialogangular-components
5
user2010955

あなたはあなたの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>
1
JuNe

@Juneの解決策は本当にうまく機能し、完全に即応しています。私が追加しなければならない唯一のものは、この作業を得るために必要な小さな調整です。私は明示的にmax-heightをmat-dialog-contentに設定しなければなりませんでした：

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