[英]Angular Mat-dialog is displaying two scrollbars, how can I remove the second?
I'm trying to build an angular aplication that needs a dialog component on the click of a button, and the problem is that when the Dialog opens it displays two scrollbars (as you can see in the picture), one for the content and another for the whole dialog.我正在尝试构建一个 angular 应用程序,它需要一个单击按钮的对话框组件,问题是当对话框打开时它显示两个滚动条(如图所示),一个用于内容,另一个对于整个对话。 I've tried a few solutions to it, like adding 'overflow:hidden' to the css file or 'padding:0' as some solution say on the forums, but it haven't worked yet.
我已经尝试了一些解决方案,比如在 css 文件中添加“溢出:隐藏”,或者像论坛上的一些解决方案所说的那样添加“填充:0”,但它还没有奏效。 Can anyone help me?
谁能帮我? (My intent is to keep only the inner scrollbar.)
(我的意图是只保留内部滚动条。)
Image of the problem: [1]: https://i.stack.imgur.com/oU9hD.png问题图片:[1]: https://i.stack.imgur.com/oU9hD.png
PS: this is a angular example dialog, which the source code can be found at: https://material.angular.io/components/dialog/examples in the section "Dialog with header, scrollable content and actions". PS:这是一个angular的示例对话框,源代码可以在: https://material.angular.io/components/dialog/examples中的“Dialog with header, scrollable content and actions”部分找到。
Please let me know if I need to provide any other info about the problem如果我需要提供有关该问题的任何其他信息,请告诉我
The outer container of the dialog overflow property set to 'auto'.对话框溢出属性的外部容器设置为“自动”。 Try to target the specific class of the outer container and set the height and overflow property to 'initial', which will remove the fixed height and overflow property and allow the container to adjust to the size of its content.
尝试针对外部容器的特定 class 并将高度和溢出属性设置为“初始”,这将删除固定高度和溢出属性并允许容器调整其内容的大小。
.mat-dialog-container {
height: initial;
overflow: initial;
}
Another thing you can try is to add overflow: auto to the inner container of the dialog您可以尝试的另一件事是将 overflow: auto 添加到对话框的内部容器
.mat-dialog-content {
overflow: auto;
}
i've solved the problem here just now... It happened that the mat-dialog-content had overflow:auto and the dialog class itself had a 24px padding, so i've discovered that a could define a new class to the dialog (using panelClass as a property on the dialog.open() fucntion) inside the function that creates it, so I made it and defined it as 0px.我刚刚在这里解决了这个问题...碰巧 mat-dialog-content 溢出了:auto 并且对话框 class 本身有一个 24px 的填充,所以我发现 a 可以为对话框定义一个新的 class (使用 panelClass 作为 dialog.open() 函数的属性)在创建它的 function 中,所以我做了它并将其定义为 0px。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.