Angular Material 启动时对话框组件滚动问题
Angular Material Dialog Component Scrolling Issue at Startup
我在我的应用程序中使用 Angular Material 对话框组件,在这个对话框中,我向用户展示了一个 HTML table 数据,可能有一个滚动条。
但我的问题是,当我单击按钮打开实际对话框时,我注意到内容立即滚动到底部,这很麻烦,因为我需要手动滚动回顶部。
我正在使用这里描述的标准设置:
https://material.angular.io/components/dialog/overview
我的对话调用如下:
myDialog(a: string, b: string) {
let dialogRef = this.dialog.open(MyDialogComponent, {
height: '500px',
width: '800px',
data: { a,b }
});
}
如何避免滚动到底部的问题?我已经尝试了一些 CSS 例如 top: 0; position: fixed;
但无济于事。
通过将以下 HTML 代码移动到页面顶部解决了我的问题。
<mat-dialog-actions>
<br>
<button mat-raised-button type="button" mat-dialog-close (click)="closeDialog()" class="my-btn">
Close
</button>
</mat-dialog-actions>
您遇到这种情况的原因是,对话框组件自动聚焦在您 HTML 内容中的第一个输入/按钮上。
您应该在对话框选项中添加 'autoFocus: false' 以防止出现这种情况。
myDialog(a: string, b: string) {
let dialogRef = this.dialog.open(MyDialogComponent, {
height: '500px',
width: '800px',
autoFocus: false,
data: { a,b }
});
}
我在我的应用程序中使用 Angular Material 对话框组件,在这个对话框中,我向用户展示了一个 HTML table 数据,可能有一个滚动条。
但我的问题是,当我单击按钮打开实际对话框时,我注意到内容立即滚动到底部,这很麻烦,因为我需要手动滚动回顶部。
我正在使用这里描述的标准设置:
https://material.angular.io/components/dialog/overview
我的对话调用如下:
myDialog(a: string, b: string) {
let dialogRef = this.dialog.open(MyDialogComponent, {
height: '500px',
width: '800px',
data: { a,b }
});
}
如何避免滚动到底部的问题?我已经尝试了一些 CSS 例如 top: 0; position: fixed;
但无济于事。
通过将以下 HTML 代码移动到页面顶部解决了我的问题。
<mat-dialog-actions>
<br>
<button mat-raised-button type="button" mat-dialog-close (click)="closeDialog()" class="my-btn">
Close
</button>
</mat-dialog-actions>
您遇到这种情况的原因是,对话框组件自动聚焦在您 HTML 内容中的第一个输入/按钮上。 您应该在对话框选项中添加 'autoFocus: false' 以防止出现这种情况。
myDialog(a: string, b: string) {
let dialogRef = this.dialog.open(MyDialogComponent, {
height: '500px',
width: '800px',
autoFocus: false,
data: { a,b }
});
}