Items disappearing with collection-repeat on iOS device

ionic-v1
1

I’m attempting to use collection-scroll.

On iOS device, when scrolling a very simple list with collection-repeat, items keep disappearing on scroll. Once the scroll slows down and completes, items ‘snap back’ into place again.

I’m using the nightly, but this happens with beta 8 as well.

This is the code I’m using:

<div>
   <a collection-repeat="speaker in speakers | filter: searchText"
        collection-item-width="'100%'"
        collection-item-height="53"
        class="item item-complex"
        id="list_{{speaker.label}}"
        ng-style="{height: '53px'}"
        ng-href="#/speaker/{{speaker.ID}}">
        {{speaker.content.first_name}} <strong>{{speaker.content.last_name}}</strong>

         <div ng-if="speaker.isDivider" class="item-divider" ng-style="{height: '53px'}">{{speaker.label}}</div>
   </a>
</div>

Anybody else experience this at all?

2

Hey @coen_warmer, can you put together a codepen for this?

3

False alarm. Once I changed my code to:

      <div collection-repeat="speaker in speakersAZ | filter: searchText"
      collection-item-width="'100%'"
      collection-item-height="53"
      class="item item-complex"
      id="list_{{speaker.label}}"
      ng-style="{height: '53px', width: '100%'}">
        <div ng-if="speaker.isDivider" class="item-divider" ng-style="{height: '53px'}">{{speaker.label}}</div>
        <a ng-if="!speaker.isDivider" class="item-content" ng-style="{height: '53px'}" ng-href="#/speaker/{{speaker.ID}}">{{speaker.content.first_name}} <strong>{{speaker.content.last_name}}</strong></a>
      </div>

everything was fine. Sorry to be alarmist.

4

Ha, glad to hear everything is all good :thumbsup:

5

All good!

Now to figure out how to calculate the height of an item when the height varies from item to item…

6

Hmm, you could try adding something to the json where you set the height there and use that in a getItemHeight function …but that is just a shot in the dark…

7

Yeah… But my list consists of text based items with varying lengths, and as view ports can vary especially on Android devices I don’t think that’s a viable option in my case.

I’m more thinking along the lines of using angular.element(index).offsetHeight or something similar in the getItemHeight function but so far I’ve been unsuccessful with that. Going to play around a little to see what I can come up with. If you have any suggestions I’d be very open to that :smile:

8

Send me a PM and a link to a codepen.

That may not work since items in a collection repeat are absolutely positioned.

9

Will do when I get home in about 30 minutes, thanks!

1 Like
10

Im having this issue, can’t figure out why…