ionic-framework: Loading icon of infinte-scroll not showing with collection-repeat

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!

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 24 (2 by maintainers)

Commits related to this issue

Update and rename _posts to _posts/2015-03-02-collection-repeat-iteration-two.md — committed to ionic-team/ionic-site by ajoslin 9 years ago

Most upvoted comments

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>

swiftyone on Jan 28, 2016