check_box_outline图标需要额外的空间

时间:2017-12-31 16:04:59

标签: angular angular-material2 google-material-icons

我的组件设计使用角度和角度材料框架时遇到了一些麻烦。

一切都基于mat-sidenav-container。 sidenav包含手风琴 - 可扩展列表,让我们说"类别"。在每个扩展面板中都有一个选项列表。到目前为止,非常好。

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

除了mat-icon设置为check_box_outline的情况外,一切似乎都运作良好。这样的图标导致水平滚动条出现在侧导航中。看起来图标后面有一些空白,但我不明白为什么。它不适用于其他图标,check_box_outline_blankindeterminate_check_box

the icon causes the horizontal scroll bar appeard

有没有人知道是什么导致了这个bug以及如何防止滚动条出现?

我将相关代码和演示on stackblitz放在app文件夹中。为了证明这个问题,我保持代码尽可能简单。我很感激任何帮助。

1 个答案:

答案 0 :(得分:1)

使用F12工具,我看不到有缺陷元素的宽度,但看起来好像在mat-icon容器的溢出中考虑了mat-sidenav元素的内部内容: / p>

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

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

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

.material-icons {
    overflow: hidden;
}