如何将水平滚动条添加到 mat-chip答案

【问题标题】：how to add horizontal scroll bar to mat-chip如何将水平滚动条添加到 mat-chip
【发布时间】：2021-09-11 06:14:13
【问题描述】：

这是我在 home.component.html 中的代码

<div class="scrollmenu" >
<mat-chip-list>
  <mat-chip *ngFor="let category of categories" class="matchip">
    {{ category.cat_name }}
  </mat-chip>
</mat-chip-list>
</div>

下面可以看到home.component.css

.scrollmenu{
    width:100%;
    overflow: auto;
  white-space: wrap;
}
.matchip {
    display: inline-block;
}

但这不起作用。我需要显示我的 mat-chips 列表可水平滚动。谢谢。

【问题讨论】：

标签： css angular angular-material angular-components horizontal-scrolling

【解决方案1】：

我必须重写内部包装类 mat-chip-list-wrapper 的 css 才能使水平滚动正常工作：

::ng-deep .mat-chip-list-wrapper {
  flex-wrap: unset !important;
  width: 100px;
  overflow-x: scroll;
}

您可以在https://stackblitz.com/edit/angular-ivy-gxyvf9?file=src/app/app.component.css查看工作示例

【讨论】：

非常感谢。你救了我。这对我有用。

【解决方案2】：

在 home.component.css 中这样尝试

.matchip{
    width:100%;
    display: flex;
    overflow-x: auto;
  }

【讨论】：

【解决方案3】：

你可以试试这个吗？我希望这就是你要找的东西

.scrollmenu{
  width: 200px;
  max-height: 40px;
  overflow-y: hidden;
}
.scrollmenu ::ng-deep .mat-chip-list-wrapper{
  flex-wrap: inherit !important;
}

【讨论】：