Установите ионную карту того же размера в ионной сетке - PullRequest
Новая
       8

Установите ионную карту того же размера в ионной сетке

2 голосов
/ 25 мая 2020

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

<ion-content [fullscreen]="true">

  <ion-grid > 
      <ion-row *ngFor = 'let item of items'>
          <ion-card>
            <ion-img  [src]='item.imagePath'></ion-img>
            <ion-header>
              <ion-card-title class='ion-text-center'> {{ item?.title }} </ion-card-title>
              <ion-card-subtitle class='ion-text-center'> {{ item?.price }} </ion-card-subtitle>
            </ion-header>
            <!-- <ion-card-content class='ion-text-wrap'> {{ item?.description }} </ion-card-content> -->
          </ion-card>
      </ion-row>

  </ion-grid>

</ion-content>

Как выглядит введите описание изображения здесь

1 Ответ

0 голосов
/ 25 мая 2020

Вам нужно обернуть каждую строку в столбец. 

<ion-grid>
 <ion-col size="12">
  <ion-row *ngFor = let item of items'>
   <ion-card>
    <ion-img  [src]='item.imagePath'></ion-img>
         <ion-header>
          <ion-card-title class='ion-text-center'> {{ item?.title }} </ion-card-title>
          <ion-card-subtitle class='ion-text-center'> {{ item?.price }} </ion-card-subtitle>
        </ion-header>
        <!-- <ion-card-content class='ion-text-wrap'> {{ item?.description }} </ion-card-content> -->
      </ion-card>
  </ion-row>
 </ion-col>
</ion-grid>

и у вас CSS сделайте это .... 

 ion-card{
  display: flex;
  flex-direction: column;
  width: 100% !important;
  margin: 0 !important;
 }
...