使用单选组时如何摆脱 material 对话框中无用的滚动条？

Question

这个Stackblitz example opens a simple dialog which contains a radio group in the mat-dialog-contentdiv.
你可以看到 dialog-content 显示了一个丑陋的滚动条：

使用其他组件时不会发生这种情况：例如输入等

使用 chrome 开发工具，我可以看到 mat-radio-button 的高度为 20px:

但是mat-radio-group只有17px的高度:

这是 angular material 组件中的错误（该示例使用版本 12.0.4），还是有一个简单的 workaround/css 我们可以用来摆脱滚动条？

我试过在 mat-radio-group 上明确设置高度，但这没有效果。

备注：

• 在生产中我们当然有很多对话框，其中一些很大并且需要滚动条
• 我们需要一个应用范围solution/workaround
• 简单地隐藏滚动条是不是好吧：它必须保持auto以便对话框可以对大小变化做出反应（例如用户旋转设备，一些项目是shown/hidden动态等

Answer 1

现在我们想出了一个解决方法来解决我们所有 30 多个对话框中的问题。

好处是我们可以在一个地方应用它，在 styles.scss:

.mat-dialog-content {
  padding-bottom: 10px !important;
}

我们只是在对话框内容区域的底部添加了一个填充，然后 scrollbars: auto 在我们所有的对话框（小的和大的）中都按预期工作。即，当您将浏览器设为 window larger/smaller 时，滚动条会自动 shown/hidden.

当一个对话框中有多个 mat-radio-group 时，它也有效。
我们的 ui.

可以接受内容和底部对话框操作之间的额外填充

Stackblitz example with workaround