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();
con
Since https://github.com/angular/material2/pull/11235, .mat-dialog-container
got max-height: inherit
which should solve your problem.
Setting maxHeight: window.innerHeight + 'px'
on the dialog configuration prevents the dialog from growing bigger than the screen.
compare all the files difference. there is extra css in 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;
}
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
Hi try to put this on your style.css or style.scss
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
}
I tried this way,
const dialogRef = this.dialog.open(LoginModalComponent, {
autoFocus: false,
maxHeight: '90vh' //you can adjust the value as per your view
});
I was looking for a similar solution as OP. The trick in the provided example is to set overflow:auto
on the .cdk-global-overlay-wrapper
.
Add this css to your styles (not inside the dialog's css):
.cdk-global-overlay-wrapper {
overflow: auto;
}
If you want to prevent scrolling on the back scenery i.e. parent component you could set overflow: hidden
on the parent as long as the dialog is open.
.. just remove the scroll strategy from the example.