How to add horizontal scroll to input field for mat-chip-list in Angular?

Question

I've recently started learning Angular & Angular Material and I can't figure out a way to add a scroll bar to an expanding input field for a mat-chip-list. My input field is editable while also using an auto-complete list to populate data. I've tried similar answers that ask you to edit CSS but none of them have worked for me. I need the chips to appear in a single line with a horizontal scroll. Right now, the input field just grows in size to accommodate the chips.

My code snippet:

        <!--Keyword section-->
        <mat-form-field class="ranking-chip-list">
          <mat-chip-list #chipList>
            <mat-chip *ngFor="let keyword of keywords" [selectable]="selectable" [removable]="removable"
              (removed)="remove(keyword)">
              {{keyword}}
              <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
            </mat-chip>

            <input placeholder="Type your keywords to sort resumes..." #keywordInput [formControl]="keywordCtrl"
              [matAutocomplete]="auto" [matChipInputFor]="chipList"
              [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event)" />
          </mat-chip-list>
          <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
            <mat-option *ngFor="let keyword of filteredKeywords | async" [value]="keyword">
              {{keyword}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
        <!--Keyword section ends-->

Please let me know if I should also link up the TypeScript code.

itspers itspers · Accepted Answer · 2020-08-16T18:57:38

just disable flex-wrap for chip-list holder

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

please note, if you have some encapsulation in component - you need to use some deep selector or write in styles.scss, maybe thats why CSS solutions you tried wasnt working, cause css is pretty obvious one line solution

How to add horizontal scroll to input field for mat-chip-list in Angular?

1 Answers