给mat-chip添加水平滚动条

Question

我不知道如何在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

- Karam

Answer 1

有人制作了一个不错的Stackblitz示例。

代码基本上可以归结为：

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

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

- Jared Beach

Answer 2

我认为这里的示例可以提供答案。 水平菜单 - w3schools 溢出和空白组合对此至关重要。

---

编辑：

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

mat-chip{
  display: inline-block;
}

JSFiddle

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

- Tomek Piechocki

---

我认为 display: inline-block 导致了那个问题。 - Karam

我认为我不理解你的目的，因为我在我发送的 fiddle 中看不到任何东西在向下移动。 - Tomek Piechocki

基本上，我只想要一条水平线，上面有我所有的芯片。 - Karam

很高兴你解决了它。我认为将其放入答案中，这样对于寻找类似问题的其他人来说更加明显。 - Tomek Piechocki

@Karam 你解决了这个问题吗？我也遇到了同样的问题，芯片一直往下移动。 - Sanket_Diwale