CODEWITHSUNDEEP
cssionic-framework
Giuseppe Faraci
Giuseppe Faraci

Reputation: 310

Words are cut in first line of ion-item in ion-list

Io ionic 3, I am using an ion-list, inside it I have an ion-item, but first line inside each ion-item is cut. As you can see, the capital 'A' letter is not entirely visibile. Can you help me? Thanks

This is my code and my screenshot

<ion-list>
 <li *ngFor="let risultato of risultatiFiltered">
  <ion-item text-wrap>
   <h3> Activity: {{risultato.activity}} </h3>          
   <h3> Time: {{risultato.time}} </h3>
   <h3> Score: {{risultato.score}} </h3>
  </ion-item>
 </li>
</ion-list>

Screenshot

Upvotes: 1

Views: 1279

Answers (1)

Malekai
Malekai

Reputation: 5011

This issue appears to affect all of the <ion-item /> elements and not just the first (and / or last) one(s), I would start by trying to change the font-size or overflow of the <ion-item /> tag.

For example, you could use the overflow-y property to remove the top / bottom "cropping" (sorry, I have no better word to describe it):

ion-item {
  overflow-y: visible
}

You could also try to make the font-size smaller, for example, if your current font-size is 16px, you could try to set it to:

ion-item {
  font-size: 14px
}

Although you should tweak it to see what works best.

UPDATE: are you using box-sizing? Because if you aren't you should check the padding as it might be affect the <ion-item /> element's size, causing it to hide it's overflow.

If that's the case then removing it using:

ion-item {
  overflow-y: visible
}

Should work. You could also remove the overflow in it's entirety using:

ion-item {
  overflow: visible
}

Good luck.

Upvotes: 3

Related Questions