向 mat-chip 添加水平滚动条答案

【问题标题】：Add horizontal scroll bar to mat-chip向 mat-chip 添加水平滚动条
【发布时间】：2021-12-01 06:10:02
【问题描述】：

我不知道如何将水平滚动添加到 mat-chip-list。有任何想法吗？我认为它必须与覆盖 mat-chip-list-wrapper 的更改有关。

.search-container {
    position: absolute;
    top: 25px;
    margin-left: 6%;
}
div.mat-chip-list-wrapper {
    display: flex;
    flex-wrap: nowrap;
  .mat-chip {
    flex: 0 0 auto;
  }
}
.mat-icon {
    vertical-align: middle;
}

<div class="search-container">
    <mat-chip-list>
        <mat-chip *ngFor="let $searchTerm of ($searchTerms | async)" [removable]="$searchTerm.removable" (removed)="removeSearchTerm(searchTerm)"  [matTooltip]="searchTerm">
            <mat-icon matSuffix>{{$searchTerm.icon}}</mat-icon>
            {{$searchTerm.value}} 
            <mat-icon matChipRemove *ngIf="$searchTerm.removable">cancel</mat-icon>
        </mat-chip>
    </mat-chip-list>
    <div class="search">
        <mat-form-field floatLabel="never" class="remove-underline trim-whitespace">
            <span matPrefix><mat-icon matSuffix>search</mat-icon></span>
            <input matInput (keyup)="onSearchTerm($event)" placeholder="Search"  [(ngModel)]="searchInput">
        </mat-form-field>
        <button mat-button (click)="submitSearchTerm()">Submit</button>
    </div>
</div>

enter image description here

【问题讨论】：

标签： html css angular

【解决方案1】：

我认为这里的例子可以提供答案

Horizontal menu - w3schools

溢出和空白组合对此至关重要。

编辑：

.scrollable {
    width: 200px;
    overflow: auto;
    white-space: nowrap;
}

mat-chip{
  display: inline-block;
}

JSFiddle

我为列表添加了一个 div 并使其可滚动。

【讨论】：

我试过这样做，但它对 mw 不起作用
类似jsfiddle.net/xotu9qgj/18。我为可滚动的列表添加了 div。
这会使输入框也可以滚动，我真的不想要
我的编辑不好。这是 div 处于良好位置的更新。 jsfiddle.net/xotu9qgj/20
很高兴你解决了它。恕我直言，将其放在答案中，以便其他寻找类似问题的人更容易看到。

【解决方案2】：

有人做了一个很好的Stackblitz example。

代码基本上归结为：

div.mat-chip-list-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;

  .mat-chip {
    flex: 0 0 auto;
  }
}

【讨论】：