1

This is how the chips are stacked right now:

https://imgur.com/hf2J8Xa

The space on the left is clearly less then on the right. How can i center the chips so that the margins on both sides are even? I've tried using custom css classes with text-align: center and vertical-align:middle but none of that worked.

EDIT: For reference here is the code:

<mat-form-field  class = "chiplist" *ngIf="advancedFilterList.length > 0">
<mat-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
    <mat-chip *ngFor="let advancedFilter of advancedFilterList" [selectable]="selectable" 
        [removable]="removable" (removed)="remove(advancedFilter)" (click)="changeUnitSymbolAndPopulateFieldsWithSelectedFilterData(advancedFilter)">
        <mat-icon matChipRemove>cancel</mat-icon>  
        <div [innerHTML]="getFullFilterDescription(advancedFilter)"></div>
    </mat-chip>
  </mat-chip-list>
</mat-form-field>
Maurice
  • 6,698
  • 9
  • 47
  • 104

1 Answers1

2

You should delete the class "mat-chip-list-stacked", since it has a width of 100%, so you would already see the mat-chip centered. If you want to add CSS, create your own class and add the corresponding styles

Example: mat-chip center

JMF
  • 1,083
  • 7
  • 17
  • did you check your stackblitz example before posting it? The chips appear horizontally while i need them to be stacked vertically. Also removing mat-chip-list-stacked class doesent change anything, it still doesent center – Maurice Jul 15 '20 at 10:10
  • I had not been completely saved. For next time, attach a stackblitz. – JMF Jul 16 '20 at 07:42
  • 1
    On my side I needed this line from css file ( justify-content: center;) Thanks – Allie Moosa Feb 21 '23 at 14:39