Comment utiliser scrollStrategy dans MatDialog?

J'ai essayé de faire un scroll pour une boîte de dialogue dans repositionner la stratégie, mais il ne fonctionne pas pour moi.

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

L'exemple complet

Je pense que pendant le défilement de la boîte de dialogue(élément .cdk-overlay-pane) se déplace

Presque droite de comportement

InformationsquelleAutor constantant | 2018-04-04
  1. 18

    Si vous voulez faire défiler le contenu de la boîte de dialogue, alors vous devez utiliser le <mat-dialog-content> tag, ou utilisez la directive tapis de dialogue contenu dans un élément div.
    Dans votre exemple, essayer 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 désormais votre dialogue le contenu devrait avoir un défilement sur le côté.
    Lire plus sur le Défilement conteneur de contenu d'une boîte de dialogue sur:

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

    • Pas si... je veux faire défiler l'ensemble de la boîte de dialogue. Regardez cet exemple
    • Bisons
    InformationsquelleAutor dirbacke
  2. 2

    J'ai essayé de cette façon,

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

    de comparer tous les fichiers différence.
    il est extra css dans le 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;
}

    • J'ai remarqué la même chose. Le overflow: auto pièce permet de faire défiler, et tout le reste des forces pour mieux s'ajuster sur l'écran.
    • Je sais. Je suis l'auteur du code 🙂 je voudrais savoir comment faire pour mettre en œuvre le même comportement sans le css modification. J'espère que vous avez remarqué non-travail d'arrière-plan en cliquant ce qui est un problème de cette solution.
    • Un autre problème avec cette approche est que lorsque vous essayez d'ouvrir une boîte de dialogue à l'intérieur d'une boîte de dialogue, il montre le second à l'extérieur de la fenêtre d'affichage.
    InformationsquelleAutor mewosic
  4. 0

    Depuis https://github.com/angular/material2/pull/11235, .mat-dialog-container ai max-height: inherit qui devrait résoudre votre problème.

    Réglage maxHeight: window.innerHeight + 'px' dans la boîte de dialogue de configuration empêche le dialogue de la croissance plus grande que l'écran.

    InformationsquelleAutor Papa Mufflon
  5. 0

    Hi essayer de mettre cela sur votre style.css ou le style.scss

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