CODEWITHSUNDEEP
htmlcssangular
Karam
Karam

Reputation: 336

Add horizontal scroll bar to mat-chip

I cant figure out how to add horizontal scrolling to the mat-chip-list. Any Ideas? I think it has to do something with overriding the changes of 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

Upvotes: 3

Views: 6518

Answers (2)

Jared Beach
Jared Beach

Reputation: 3163

Someone made a good Stackblitz example.

The code basically boils down to:

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

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

Upvotes: 1

Tomek Piechocki
Tomek Piechocki

Reputation: 26

I think example here can provide answer for that

Horizontal menu - w3schools

Overflow and white-space combination is crucial for that.

EDIT:

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

mat-chip{
  display: inline-block;
}

JSFiddle

I added a div for the list and made it scrollable.

Upvotes: 1

Related Questions