web-dev-qa-db-ja.com

MatDialogでscrollStrategyを使用する方法は？

再配置戦略でダイアログのスクロールを作成しようとしましたが、うまくいきません。

const scrollStrategy = this.overlay.scrollStrategies.reposition();
const dialogRef = this.dialog.open( DialogOverviewExampleDialog, { scrollStrategy } );

完全な例

スクロール中にダイアログ全体（要素.cdk-overlay-pane）移動します

ほぼ正しい動作

angularscrolldialogangular-material
13
constantant

ダイアログの内容をスクロールしたい場合は、<mat-dialog-content>タグ、またはdiv要素でディレクティブmat-dialog-contentを使用します。あなたの例では、代わりに次を試してください：

<h1 mat-dialog-title>Hi {{data.name}}</h1>
<mat-dialog-content> <!-- instead of your <div>  or use <div mat-dialog-content> -->
  <p>What's your favorite animal!!!!!!!</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal?</p>
  <p>What's your favorite animal!!!!!!</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</mat-dialog-content> <!-- instead of your </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>

これで、ダイアログコンテンツの横にスクロールが表示されます。ダイアログのスクロール可能なコンテンツコンテナの詳細を読む：

https://material.angular.io/components/dialog/api#MatDialogContent

22
dirbacke

私はこのようにしてみました、

const dialogRef = this.dialog.open(LoginModalComponent, {
      autoFocus: false,
      maxHeight: '90vh' //you can adjust the value as per your view
});
2
AbdulRehman

こんにちは、これをstyle.cssまたはstyle.scssに配置してみてください

.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
  overflow: auto;
  pointer-events: auto;  
}
1
Jet Buque Matias

すべてのファイルの違いを比較します。 style.cssに余分なCSSがあります

.cdk-global-overlay-wrapper {
  pointer-events: auto;
  display: block;
  position: relative;
  overflow: auto;
  text-align: center;
}

.cdk-global-overlay-wrapper::before {
  content: '';
  display: inline-block;
  height: 100%;
  white-space: nowrap;
}

.cdk-overlay-pane {
  display: inline-block;
  position: relative;
  text-align: left;
  white-space: normal;
}
0
mewosic

https://github.com/angular/material2/pull/11235 から、.mat-dialog-container得たmax-height: inheritこれはあなたの問題を解決するはずです。

設定maxHeight: window.innerHeight + 'px'ダイアログ設定で、ダイアログが画面より大きくなるのを防ぎます。

0
Papa Mufflon