Colection-repeat displays list incorrectly

ionic-v1
1

So I have list that when I use ng-repeat to fill it, it displays properly and fills out the scrollable list as expected.
Howerver, if I take the below code and change it to collection-repeat, it displays the items as a single list-item high stack, one behind the other:

<ion-list id="productList">
        		<ion-item class="productItem animated fadeIn" ng-click="setProduct('', 'alllines')" style="background-image: url(img/lines/bars/alllines.jpg);">All Products</ion-item>
        		<ion-item ng-repeat="product in products" 
        			class="productItem animated fadeInLeft"
        			ng-class="{fadeInRight: $index % 2 == 0}"
        			ng-click="setProduct('{{product.name}}', '{{product.image}}')" 
        			style="background-image: url(img/lines/bars/{{product.image}}.jpg);">{{product.name}}</ion-item>
            </ion-list>

Any ideas on where I’ve gone wrong?

2

Hmm, it might have to do with the animation class. Since collection repeat items are absolute positioned, they could be interfering with it. I’m guessing you’re using animate.css? Would you be able to provide a small demo of this in codepen?

3