How to use scrollStrategy in MatDialog?

Question

I tried to make a scroll for a dialog in reposition strategy, but it doesn't work for me.

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

The full example

I expect that during scrolling the whole dialog(element .cdk-overlay-pane) will move

Almost right behavior

Answer 1

If you want to scroll the content of the dialog then you have to use the <mat-dialog-content> tag, or use the directive mat-dialog-content in your div element. In your example try the following instead:

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

And now your dialog content should have a scroll on the side. Read more about the Scrollable content container of a dialog on:

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