Ion-item content unbehaves and overflows into the next item

ionic-v1
1

Hi,

I have a list of ion-itmes in a list and sometimes the content from one item overflows into the next item or is obscured by the next item.

This happens both when running “ionic serve” (android) on ubuntu, “ionic serve --lab” on ios and on my android device.

Has anyone else exeprienced this?

The view is snipped below (behaves the same if I take filters and orderby out):

<ion-view view-title=“The App”>
<ion-nav-buttons side=“secondary”>
<button class=“button button-icon icon ion-ios-search-strong” ng-click=“showFilterBar()”>
</button>
</ion-nav-buttons>
<ion-content padding=“true” scroll=“true”>
<ion-list>
<ion-item collection-repeat=“job in employment.jobOpenings | filter:employment.jobSearch | orderBy : ‘jobTitle’” class=“item-text-wrap”>
<h2 class=“title” style=“font-weight:bold”>{{job.jobTitle}}</h2>
<div style=“font-size:85%;”><span style=“font-weight:bold”>Job description:</span> {{job.jobDesc}}<br>
<span style=“font-weight:bold”>Requirements:</span> {{job.jobReqs}}<br>
<span style=“font-weight:bold;”>Location(s):</span> {{job.jobLoc}}</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>

My setup:

Cordova CLI: 6.0.0
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.3 LTS
Node Version: v5.2.0

Cheers!

2

DOH - forgot to properly encode the view markup so it probably didn’t make much sense to anyone…

After wrapping the whole content of the ion-item in an extra <div> it started behaving. BUT ONLY in the “ionic serve” on Ubuntu.

It still misbehaves on the android device and in the “ionic serve -lab” on OS X, both ios and android. As well as in the ios native emulator.

Also, after further investigating it seems like it’s the item-text-wrap class that’s not behaving for ion-item. If I take that out, the content won’t overflow the next item vertically. But of course it’ll flow off the screen to the right

3

Ok - mystery solved,

I missed that collection-repeat sizes the items based on the first item unless you explictly use item-width and item-height. So if the first one is NOT the biggest there will be overflow.

I opted to use ng-repeat instead since it seems like it’s dynamically sizing the items. And the number of items is fairly low.