Ion-collection and wierd display behavior

Hello,

I’m trying to create a ion-collection wich will contain elements.
Each element has text and stuff, and a ion-slidebox element.

I think there’s a problem of resolving elements before displaying the ion-collection :

  • item.photos do not seem to be resolved before rendering ( meaning item.photos.length is 0, which is false )
  • if you do <div collection-repeat="item in items" id="item-{{item.id}}"><!-- stuffs --> ` it does not work either since ID is not resolved before rendering ( at least it seems )
  • Wierd thing is : if I open a modal, the whole page is refreshed and the photos appear.
  • Also when I scroll down and the infinite-scroll loads more items, the photos are way too large ( they should be 100% width of the scroll content, but they are 100% width of the slider element which is much larger since it contains all slides )

I hope it’s not too hard to understand i’m having trouble describing it properly :slight_smile:

Did someone obverse the same behavior ? Is it a bug ? Or what did i do wrong ?

Thanks a lot

Update i noticted that resizing window ( or changing device orientation ) makes it look correct. Is there a way to know when ion-collection has finished rendering and update ?

Have you tried using ng-if to not show the div until ready?

Hello,

Yes but it does not display anything.
In fact data should be loaded since we have a resolve before rendering the template. I’m pretty sure this comes from the slide withing each element but I have no idea how to fix it.

Thanks

What about using a watch method on the scope to determine when the collection has finished rendering. Inside the watch you could have the slide box delegate update trigger.

Check out the scope docs for the watch method. https://docs.angularjs.org/api/ng/type/$rootScope.Scope