[英]Virtual scroll ion-img tag overlapping to another ion card
I have a problem using ion-img
in virtual scroll, when im not going to set the width and height of the ion-img
tag it shows a tiny image.我在虚拟滚动中使用
ion-img
遇到问题,当我不打算设置ion-img
标签的宽度和高度时,它会显示一个小图像。 But when I set some width and height on it it overlaps to another card which is not right但是当我在上面设置一些宽度和高度时,它会与另一张不正确的卡片重叠
below is the code that i am using下面是我正在使用的代码
<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>
EDIT: I forgot to mention that this was bug and still on the process in solving but im asking another work around to fix this problem im not good at doing css
编辑:我忘了提到这是一个错误,仍在解决过程中,但我要求另一种工作来解决这个问题,我不擅长做 css
You have to reduce the height of the image by the card footer.您必须通过卡片页脚降低图像的高度。 Something like:
就像是:
img.height -= card.footerHeight
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.