web-dev-qa-db-fra.com

Comment utiliser scrollStrategy dans MatDialog?

J'ai essayé de faire un parchemin pour un dialogue en stratégie de repositionnement, mais cela ne fonctionne pas pour moi.

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

L'exemple complet

J'espère que pendant le défilement, tout le dialogue (élément .cdk-overlay-pane) se déplacera 

Un comportement presque juste

angularscrolldialogangular-material
3
constantant

Si vous souhaitez faire défiler le contenu de la boîte de dialogue, vous devez utiliser la balise <mat-dialog-content> ou utiliser la directive mat-dialog-content dans votre élément div . Dans votre exemple, essayez plutôt ce qui suit:

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

Et maintenant, votre contenu de la boîte de dialogue devrait avoir un parchemin sur le côté . En savoir plus sur le conteneur de contenu défilable d'une boîte de dialogue sur:

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

6
dirbacke

compare toutes les différences de fichiers . il y a extra css dans style.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;
}

1
mewosic