Использование несколькихтеги внутри - PullRequest
Новая
       30

Использование несколькихтеги внутри

0 голосов
/ 09 ноября 2019

Я использую несколько тегов <mat-chip> внутри тега <mat-list-item>. Моя проблема в том, что следующий <mat-list-item> не будет двигаться вниз. Он просто сохраняет ту же позицию и почти не читается. Я использовал matLine, но, похоже, это не решение проблемы. 

<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>

Пожалуйста, сфотографируйте его: https://stackblitz.com/edit/list-examples-jxhvsn?file=index.html

Как я могу это исправить?

1 Ответ

1 голос
/ 09 ноября 2019

Я понял, что проблема в высоте. 

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

Это исправит это.

...