Bug related to new collection-repeat?

ionic-v1
1

I have this markup…

<ion-scroll ng-style="{height: containerHeight}">
            <ion-list class="list-alternate" ng-style="{height: containerHeight}">
                <ion-item collection-repeat="subject in subjectsToDisplay | orderBy:selectedSort.predicate:selectedSort.reverse == 'true' | filter:{displayValue: search.text}"
                          ng-click="selectSubject(subject)"
                          class="item-icon-right">
                    <div class="row list-row">
                        <div class="col overflow-col">
                            {{subject.displayValue}}
                        </div>
                        <div class="col overflow-col">
                            {{subject.dateDisplay.prettyDate}}
                        </div>
                    </div>
                    <i class="icon ion-ios-arrow-forward"></i>
                    <div class="pending-label" ng-if="subject.hasPending"></div>
                </ion-item>
            </ion-list>
            <div class="card" ng-if="$root.network.isOffline">
                <div class="item item-text-wrap">
                    <div class="pending-example"></div>
                    <p class="pending-example-text">
                        Some text here.
                    </p>
                </div>
            </div>
        </ion-scroll>

When the ng-if for the card at the bottom is true, it first displays overlaying the collection-repeat list items. It never used to do this!
When you scroll it off the screen and then scroll back again it is gone and only appears underneath the list where it is supposed to

Here are some screenshots demonstrating this…

image
ionic_card_overlay_list1.JPG392×594 23.5 KB

image
image

Any ideas?

2

I don’t know what can be causing that, but have you tried changing it a bit to make it an element of the list ? Since you want it always at the bottom, maybe use an ion-item inside of the ion-list and after the repeated elements in place of your div.

3

I didn’t really want the hassle of styling it to look like it’s not part of the list but yeah I think I might have to do that to sort it out

4

Have you seen this before / could you help please @mhartington? :slight_smile:

5

Would you be able to throw together a quick demo of this happening with fake data?

6

@mhartington Yeah I’ll try to get a demo together at some point soon!

Basically what I think is happening is the collection-repeat container doesnt have a height? So any markup (like my div there) doesn’t sit under anything and just goes to the top. If I add my div to a seperate at the end of the list, it still stays at the top even when there are loads of collection-repeat items above it in the markup