Мат-карта не растет после изменения размера носителя - PullRequest
Новая
       27

Мат-карта не растет после изменения размера носителя

0 голосов
/ 10 июня 2019

Я создаю небольшое угловое приложение с Flex-макетом, и я застрял.

На большом экране все работает правильно, но когда для небольших устройств я хочу, чтобы каждое свойство занимало один ряд. Поэтому я установил свойство fxFlex.lt-sm = 100 для каждой строки. Пожалуйста, найдите ниже скриншоты и мой код. Может быть, один из вас мог бы дать мне подсказку, где я допустил ошибку?

! [1] https://i.imgur.com/bd66eev.png "ок"
! [2] https://i.imgur.com/as3HzuJ.png «неправильно»

Я установил свойство fxFlex.lt-sm = 100 для каждой строки. Пожалуйста, найдите ниже скриншоты и мой код. Может быть, один из вас мог бы дать мне подсказку, где я допустил ошибку? 

<mat-card>
  <mat-list role="list">
    <mat-list-item
      role="listitem"
      *ngFor="let user of (usersState | async).users"
      class="users-list">
      <div
        fxFill
        fxLayout="row wrap"
        fxLayoutGap="5px">
        <div
          fxFlex="30"
          fxFlex.lt-sm="100">
          <p>{{ user.email }}</p>
        </div>
        <div
          fxFlex="20"
          fxFlex.lt-sm="100">
          <p>{{ user.username }}</p>
        </div>
        <div
          fxFlex="20"
          fxFlex.lt-sm="100">
          <p>{{ user.active ? 'Account active' : 'Account inactive'}}</p>
        </div>
        <div
          fxFlex.lt-sm="100">
          <p>actions</p>
        </div>
        <mat-divider></mat-divider>
      </div>
    </mat-list-item>
  </mat-list>
</mat-card>

Также мат-карта не подстраивается под фактический размер контента.

1 Ответ

0 голосов
/ 10 июня 2019

ваш код работает как положено. однако mat-list-item имеет фиксированное значение height, равное 48px. поэтому на маленьких экранах высота mat-list-item не растет, как вы ожидаете. Кроме того, mat-card также не подстраивается под фактический размер контента.

переопределение height на mat-list-item следующим образом должно решить обе проблемы. 

.users-list {
    height: auto !important;
}

вот рабочая демонстрация: https://stackblitz.com/edit/angular-rgepcp

...