2

我在使用 angular 和 angular-material 框架的组件设计时遇到了一些问题。

一切都基于mat-sidenav-container. sidenav 包含手风琴 - 可扩展列表,比如说“类别”。在每个扩展面板中都有一个项目选择列表。到现在为止还挺好。

在选择列表上方,我添加了一个mat-list包含一个项目的常规。该项目包含标题和“全选”选项。对于“全选”实用程序,我使用了相关的可点击mat-icon.

一切似乎都运行良好,除了mat-icon设置为的情况check_box_outline。这样的图标会导致水平滚动条出现在侧导航中。看起来图标后添加了一些空格,但我不明白为什么。它不会出现在其他图标上,也不会check_box_outline_blank出现indeterminate_check_box

该图标导致出现水平滚动条

有谁知道究竟是什么导致了这个错误以及如何防止滚动条出现?

我将相关代码和演示放在 stackblitz 上(在app文件夹内)。我保持代码尽可能简单只是为了演示这个问题。我会很感激任何帮助。

4

1 回答 1

5

使用 F12 工具,我看不到错误元素的宽度,但看起来好像mat-icon在容器溢出时考虑了元素的内部内容mat-sidenav

<mat-icon _ngcontent-c0="" class="mat-icon material-icons" role="img" aria-hidden="true">
              check_box_outline
</mat-icon>

当我check_box_outline在呈现的 HTML 中进行编辑时,滚动条会适应新内容,即使该内容未显示。

将以下 CSS 样式添加到 styles.css 似乎可以解决问题(请参阅修改后的 stackblitz):

.material-icons {
    overflow: hidden;
}
于 2017-12-31T16:39:02.527 回答