CODEWITHSUNDEEP
cssangularangular-material
Reza Saadati
Reza Saadati

Reputation: 1274

Using multiple <mat-chip> tags within <mat-list-item>

I am using multiple <mat-chip> tags within the tag <mat-list-item>. My problem is that the next <mat-list-item> won't move down. It just keeps the same position and it's almost unreadable. I have used matLine but that seems not to be the solution.

<mat-list>
  <mat-list-item *ngFor="let message of messages">
    <mat-icon matListIcon>folder</mat-icon>
    <h3 matLine> {{message.from}} </h3>
    <p matLine>
      <span> {{message.subject}} </span>
      <span class="demo-2">
                        <mat-chip-list>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>
                  <mat-chip color="primary" selected>Tag</mat-chip>

                </mat-chip-list>
      </span>
    </p>
  </mat-list-item>
</mat-list>

Please take yourself a picture of it: https://stackblitz.com/edit/list-examples-jxhvsn?file=index.html

How can I fix this?

Upvotes: 0

Views: 318

Answers (1)

Reza Saadati
Reza Saadati

Reputation: 1274

I have figured out that the height is the problem.

mat-list-item {
  height: auto !important
}

This would fix it.

Upvotes: 1

Related Questions