typescript Angular 5 / Material，如何在 Mat Dialog 中删除垂直滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49983354/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 / Material, how to remove vertical scroll in Mat Dialog?
提问by ackuser
I am trying to remove the vertical scrolling in a Material Dialog.
我正在尝试删除材质对话框中的垂直滚动。
I was trying with CSS
我正在尝试使用 CSS
.mat-dialog-container /deep/ {
overflow-y: hidden;
}
and also with the code in the parent component
以及父组件中的代码
this.dialog._overlayContainer._containerElement.style.overflowY = "hidden";
But, there was no way to do that.
但是，没有办法做到这一点。
Does it know anyone how I can achive that?
有谁知道我如何做到这一点？
Thanks
谢谢
回答by G. Tranter
In your dialog component's style:
在对话框组件的样式中：
/deep/ .mat-dialog-content {
overflow-y: hidden !important;
}
回答by Ritiwik Brahma
Go to styles.scss file and then add the following:
转到styles.scss 文件，然后添加以下内容：
.custom-dialog-container .mat-dialog-container {
overflow-y: hidden;
}
and add
并添加
panelClass: 'custom-dialog-container'
as a part of the MatDialogRef object that you are sending to the dialogComponent
作为您发送到 dialogComponent 的 MatDialogRef 对象的一部分
回答by Hien Nguyen
This is my implement. In parent component of TrendDialogComponent
这是我的工具。在父组件中TrendDialogComponent
const dialogRef = this.trendDialog.open(TrendDialogComponent, {
autoFocus: false,
panelClass: 'trend-dialog',
width: '1360px', height: '680px',
data: {tagsTrend: this.tagNames}
});
and add this css to style.css
并将此 css 添加到 style.css
.trend-dialog .mat-dialog-container{
overflow-y: hidden !important;
}
回答by DerKarim
If your dialog stretches over the whole page and the scrollbar on the right does not disappear, I would suggest this option.
如果您的对话框延伸到整个页面并且右侧的滚动条没有消失，我会建议使用此选项。
.cdk-global-scrollblock {
overflow-y: hidden;
}
That worked for me.
那对我有用。
回答by sadab khan
Inside your dialog component's style, you can use
在对话框组件的样式中，您可以使用
::ng-deep .mat-dialog-container {
overflow-y: hidden !important;
}
回答by abo
I had the same issue when my html contains mat-dialog-content
当我的 html 包含时，我遇到了同样的问题 mat-dialog-content
<div mat-dialog-content>
<mat-form-field>
....
</mat-form-field>
</div>
Then I changed to,
然后我改为，
<div>
<mat-form-field>
....
</mat-form-field>
</div>
And it removes the vertical scroll bar from the dialog.
它从对话框中删除了垂直滚动条。
