Loading icon of infinte-scroll not showing with collection-repeat

[matiastucci]

Using ng-repeat (loading icon appears): http://codepen.io/anon/pen/CBtEg
Using collection-repeat (doesn't appear): http://codepen.io/matiastucci/pen/wkECs

Probably because of this?:

"You should not use the ng-show and ng-hide directives on your ion-content/ion-scroll elements that have a collection-repeat inside. ng-show and ng-hide apply the display: none css rule to the content's style, causing the scrollView to read the width and height of the content as 0. Resultingly, collection-repeat will render elements that have just been un-hidden incorrectly."

I know this is something small, but if you can fix it: great!

Thanks!

[bra1n]

👍 Ran into the same problem, seems like those 2 directives don't play along nicely.

[matiastucci]

@bra1n I think is the ng-show of the collection-repeat

[naavis]

I'm still experiencing this problem with beta-13.

[lanceli]

hotfix

var ionInfiniteScroll = self.element.find('ion-infinite-scroll');
if (ionInfiniteScroll.length === 1 && dataIndex !== 0) {
  ionInfiniteScroll.css(
    ionic.CSS.TRANSFORM,
    self.transformString(rect.primaryPos - self.beforeSize, rect.secondaryPos)
  );
}

add this before line 1071
https://github.com/driftyco/ionic/blob/v1.0.0-beta.13/release/js/ionic-angular.js

[sherlock221]

yeah @lanceli good job thankyou

[lanceli]

@perrygovier @ajoslin
Does not work in nightly 1081, reopen issue please.

[jryu01]

I'm experiencing this problem with nightly build.

[ajoslin]

I don't see a problem with http://codepen.io/anon/pen/CBtEg in the nightly builds. What's wrong?

[lanceli]

@ajoslin
Your codepen is ng-repeat, the issue with collection-repeat

[ajoslin]

Fixed. Had to set the items after the collection repeat to display: block to make them always get the right size.

[luofan189]

It seems that this issue appears again in rc.5. The icon shows when using ng-repeat but not collection-repeat

[jamesgecko]

Yep. This worked in 1.0rc1 and is broken in 1.0.

[mvidailhet]

+1, broken for me in 1.0

[thpoul]

+1 for me

[hbmartin]

Broken for me as well with ng-repeat 😿

[mica16]

Broken for me too with 1.0 ;)

[mpochron]

+1 reopen!

[SatadruBhattacharjee]

Broken for me with latest 1.0

[JWesorick]

+1!

[JWesorick]

@perrygovier @ajoslin Any update on when this may be fixed or a work around?

[degamer106]

BUMP

[jordansitbon]

UP! +1!

[swiftyone]

For me a simple workaround did the trick until it is fixed:

ion-infinite-scroll:not(.active) .spinner,
ion-infinite-scroll:not(.active) .icon:before {
    display: inline-block;
}

It is not mandatory that the icon is only visible if the ion-infinite-scroll-Element is active if you use a ng-show or ng-if directive:

<ion-infinite-scroll ng-show="showInfinite" icon="ion-load-c" on-infinite="loadData()">
</ion-infinite-scroll>

[shivarad]

ion-infinite scrolling is not working for me in v1.1.0 for vs2015 package of phongeap!