Intenté hacer un desplazamiento para un diálogo en la estrategia de reposición, pero no me funciona.
const scrollStrategy = this.overlay.scrollStrategies.reposition(); const dialogRef = this.dialog.open( DialogOverviewExampleDialog, { scrollStrategy } ); Espero que durante el desplazamiento todo el cuadro de diálogo (elemento .cdk-overlay-pane ) se mueva
Si desea desplazar el contenido del cuadro de diálogo, debe usar la etiqueta <mat-dialog-content> o usar la directiva mat-dialog-content en su elemento div. En su ejemplo, intente lo siguiente en su lugar:
<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>Y ahora el contenido de su cuadro de diálogo debe tener un desplazamiento en el lateral. Lea más sobre el contenedor de contenido desplazable de un cuadro de diálogo en:
https://material.angular.io/components/dialog/api#MatDialogContent
Lo intenté de esta manera,
const dialogRef = this.dialog.open(LoginModalComponent, { autoFocus: false, maxHeight: '90vh' //you can adjust the value as per your view });Hola intenta poner esto en tu style.css o style.scss
.cdk-global-overlay-wrapper { display: flex; position: absolute; z-index: 1000; overflow: auto; pointer-events: auto; }