我尝试在重新定位策略中为对话框滚动,但它对我不起作用。
const scrollStrategy = this.overlay.scrollStrategies.reposition();
const dialogRef = this.dialog.open( DialogOverviewExampleDialog, { scrollStrategy } );
我希望在滚动期间整个对话框(元素.cdk-overlay-pane
)会移动
如果要滚动对话框的内容,则必须使用<mat-dialog-content>
标记,或在div元素中使用指令mat-dialog-content。在您的示例中,请尝试以下操作:
<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>
现在你的对话框内容应该有一个滚动。阅读有关对话框的Scrollable内容容器的更多信息:
https://material.angular.io/components/dialog/api#MatDialogContent
我这样试过,
const dialogRef = this.dialog.open(LoginModalComponent, {
autoFocus: false,
maxHeight: '90vh' //you can adjust the value as per your view
});
比较所有文件的差异。 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;
}
自https://github.com/angular/material2/pull/11235以来,.mat-dialog-container
得到了max-height: inherit
,它可以解决你的问题。
在对话框配置上设置maxHeight: window.innerHeight + 'px'
可防止对话框比屏幕大。
您好试着把它放在你的style.css或style.scss上
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
}