Search code examples
cssangularangular-materialangular-componentshorizontal-scrolling

how to add horizontal scroll bar to mat-chip

here is my code in 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>

below you can see home.component.css

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

but this is not working.I need to show my mat-chips list horizontally scrollable. Thank you.

Solution

  • I had to override the css of the internal wrapper class mat-chip-list-wrapper to get the horizontal scroll working:

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

    You can checkout the working example at https://stackblitz.com/edit/angular-ivy-gxyvf9?file=src/app/app.component.css