I have a problem with the heith of ion-items I upload a screenshot of the app in order to show the problem.
This is part of the list code.
<ion-list *ngSwitchCase="'pending'">
<ion-item *ngFor="let activity of (pendingActivities | async)?.result"
(click)="activityTapped($event, activity)">
<h2>{{activity.client.name}}</h2>
<p>{{activity.client.address}}</p>
<ion-icon [name]="'ios-arrow-forward-outline'" item-end></ion-icon>
</ion-item>
</ion-list>
And what exactly is the problem?
If you see the picture the top of the text it is cut this happen on some of the ion-items and I dont know why becouse the de contento of each one has the same structure
Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Inspect the source code like you could do on your computer to look at the HTML and CSS and try to find out what is going on there. Negative margin or something strange?
Does it happen consistently/always/randomly?
Is the text the reason or the “position” in the list?
This is one list of the app with the problem…
The problem is the h2 negative margin but I don’t know why is there
I solve the problem, adding this to the activity.scss, but, I don’t know if this is the correct way to do this.
[padding] h2:first-child{
margin-top: auto !important;
}
