html - Arrange <mat-list-item> objects in <mat-list> automatically

Question

The sample code:

<div>
    <mat-list fxLayout="row" dense>
        <mat-list-item *ngFor="let label of labelsList"> <!-- just an array of strings -->
            <button mat-button>
                <mat-icon>cloud</mat-icon>
                {{label}}
            </button>
        </mat-list-item>
    </mat-list>
</div>

---

The result:

---

When I resize the browser window:

---

What I need: the buttons that don't "have room" to simply go on the next row.

How do I achieve this? I tried several combinations of CSS classes, properties, etc... nothing worked.

LATER EDIT: here's a complete reproducible example: https://angular-svt72k.stackblitz.io

question from:https://stackoverflow.com/questions/65626435/arrange-mat-list-item-objects-in-mat-list-automatically

Answer 1

mat-list-item is by default using the full width of its container and setting each item as display: block. To overrule this, you need to override the default Angular (Material) styling that comes with <mat-list>.

Setting .mat-list-test to display: flex and adding flex-flow: row wrap will make it go to the next line when there's not enough space available. Next to that, as said, the .mat-list-item styling is taking the full width. You can override it by setting display: initial and width: auto. Read more about flexbox at MDN.

CSS

.mat-list-test {
  display: flex;
  flex-flow: row wrap;
}

.mat-list-base .mat-list-item.mat-list-item-test {
  display: initial;
  width: auto;
}

See this example on StackBlitz to show the outcome.