Customize mat-selection-list

user_13115154 0
Viewed 656

I have a list of elements. Every element is displayed on a row. How can I display four elements on a row?

My code is:

<div class="form" id="skillsList">
     <mat-label>Choose skills</mat-label>
      <mat-selection-list  #skills>
        <mat-list-option *ngFor="let skill of listOfSkills">
          {{skill}}
        </mat-list-option>
      </mat-selection-list>
  </div>
angular typescript css html
2 Answers

It looks like mat-list-option has display: block. So you can override that to get them to display however you want. For example:

<mat-list-option ngFor="let skill of listOfSkills" 
    style="display:inline-block; text-align:center;">
   {{skill}}
</mat-list-option>

or using CSS:

mat-list-option {
    display:inline-block !important; 
    text-align: center;
}
user_16462400

This is what you're going to want to do if you want exactly 4 per line as you had originally stated.

<div class="form" id="skillsList">
     <mat-label>Choose skills</mat-label>
      <mat-selection-list style="display: flex; flex-wrap: wrap"  #skills>
        <mat-list-option *ngFor="let skill of listOfSkills; let i = index" [attr.data-index]="i">
          {{skill}}
          <div *ngIf="i%4" style="flex-basis:100%;"></div>
        </mat-list-option>
      </mat-selection-list>
</div>

All you're doing is adding a modulo operator that triggers after every fourth item to break the line. The flex-wrap and display flex are to allow you to put flex basis on the div with the *ngIf

user_98560040
Related