Как разместить элемент вертикально на mat-list-item при изменении его размера? - PullRequest
Новая
       20

Как разместить элемент вертикально на mat-list-item при изменении его размера?

0 голосов
/ 05 июля 2018

Попытка составить список, из которого при изменении размера текстовый элемент будет располагаться вертикально друг над другом, но они начинают перекрываться при изменении размера окна, как видно на правом изображении. Левое изображение полноэкранное. 

<mat-list-item *ngFor="let item of items">
  <div matLine>
    <div fxLayout="column">
      <div fxLayout="column" fxLayout.gt-md="row">
         <div fxFlex="50"> ---------one--------- </div>
         <div fxFlex="50"> ---------two--------- </div>
       </div>
       <div fxLayout="column" fxLayout.gt-md="row">
         <div fxFlex="50"> ---------three---------</div>
         <div fxFlex="50"> ---------four---------</div>
        </div>
      </div>
    </div>
  </mat-list-item>

1 Ответ

0 голосов
/ 05 июля 2018

A mat-list-item имеет фиксированную высоту, которая определяется конструкцией материала. Если вам нужно больше места, вы должны использовать что-то отличное от mat-list или разбить на несколько элементов списка: 

<ng-container *ngFor="let item of items">
    <div fxHide.lt-lg>
        <mat-list-item>
            <div matLine>
                <div fxLayout="column">
                    <div fxLayout="row">
                        <div fxFlex="50"> ---------one--------- </div>
                        <div fxFlex="50"> ---------two--------- </div>
                    </div>
                    <div fxLayout="row">
                        <div fxFlex="50"> ---------three---------</div>
                        <div fxFlex="50"> ---------four---------</div>
                    </div>
                </div>
            </div>
        </mat-list-item>
    </div>
    <div fxHide.gt-md>
        <mat-list-item>
            <div matLine>
                <div fxLayout="column">
                    <div fxFlex="50"> ---------one--------- </div>
                    <div fxFlex="50"> ---------two--------- </div>
                </div>
            </div>
        </mat-list-item>
        <mat-list-item>
            <div matLine>
                <div fxLayout="column">
                    <div fxFlex="50"> ---------three---------</div>
                    <div fxFlex="50"> ---------four---------</div>
                </div>
            </div>
        </mat-list-item>
    </div>
</ng-container>
...