Виртуальная прокрутка тега ion-img, перекрывающая другую ионную карту - PullRequest
Новая
       5

Виртуальная прокрутка тега ion-img, перекрывающая другую ионную карту

0 голосов
/ 13 ноября 2018

У меня проблема с использованием ion-img в виртуальной прокрутке, когда я не собираюсь устанавливать ширину и высоту тега ion-img, он показывает крошечное изображение.Но когда я устанавливаю на нем некоторую ширину и высоту, он перекрывается с другой картой, которая неверна

image shows the overlapping of both item

ниже - код, который я использую 

<ion-list [virtualScroll]="posts" [approxItemHeight]="'150px'">
    <div *virtualItem="let post" style="width: 100%">
      <ion-card class="adv-map">
        <ion-item>
          <ion-avatar item-start>
            <img src="img/marty-avatar.png">
          </ion-avatar>
          </button> -->
          <h2>{{ post.name }} </h2>
          <p>{{ post.date_posted }}</p>
        </ion-item>

          <ion-img [width]="imgWidth" [height]="imgHeight" [src]="post.imagepost_url"></ion-img>
          <ion-fab right top class="fab-map">
            <button (click)="showLocation(post.lattitude,post.longitude,post.title)" ion-fab>
              <ion-icon name="pin"></ion-icon>
            </button>
          </ion-fab>

        <ion-card-content>
          <ion-card-title>
            {{post.title}}
          </ion-card-title>
          <p>
            {{post.content}}
          </p>
        </ion-card-content>
      </ion-card>
          <div style="height:100px"></div>
    </div>
  </ion-list>

РЕДАКТИРОВАТЬ: я забыл упомянуть, что это была ошибка и все еще находится в процессе решения, но я прошу другую работу вокруг, чтобы исправить эту проблему, я не очень хорошо делать CSS

1 Ответ

0 голосов
/ 13 ноября 2018

Вы должны уменьшить высоту изображения нижним колонтитулом карты. Что-то вроде: 

img.height -= card.footerHeight
...