Incorrect order of fa-views in a fa-scrollview

[holmesal]

Hiya! I'm trying to lay out a bunch of views in a scroll view, and I'm having some problems with the order.

What I have is this:

<fa-scroll-view fa-pipe-from="verticalScrollHandler" fa-options="props.list">

  <!-- Add button -->
  <fa-view>
    <fa-surface
      fa-size="[undefined,true]"
      fa-properties="props.channel"
      fa-pipe-to="verticalScrollHandler"
      class="addChannelCell">+</fa-surface>
  </fa-view>

  <!-- List of channels -->
  <fa-view ng-repeat="channel in channels">
    <fa-modifier>
      <fa-surface 
        fa-size="[undefined,true]" 
        fa-properties="getCellProps($index)"
        fa-pipe-to="verticalScrollHandler"
        class="channelCell"
        ng-style="getBackgroundColor($index)">
        <p class="channelName">#{{channel.$id}}</p>
      </fa-surface>
    </fa-modifier>
  </fa-view>

  <!-- Tips -->
  <fa-view>
    <fa-surface
      fa-size="[undefined,true]"
      fa-properties="props.tips"
      fa-pipe-to="verticalScrollHandler"
      class="tipsCell">
      <p class="tips">This is a tip</p>
    </fa-surface>
  </fa-view>

</fa-scroll-view>

Unfortunately, the final fa-view gets displayed amidst the ng-repeated fa-views. What I see is this:

Interestingly, on desktop the final fa-view always shows up in the middle of the ng-repeated views, on mobile it always shows up above all of the ng-repeated views. Always in the same place on each platform.

[zackbrown]

Hiya @holmesal, fa-index is used to solve this exact problem. It turns out the order that sibling elements are compiled by Angular is inconsistent across browsers and even sometimes within the same browser.

You can pass fa-index an explicit index and ViewSequence-backed views like the ScrollView will use those indexes for sorting children. (If fa-index is omitted, order will be bound to $index if that value exists on a given scope, e.g. with ng-repeat, and will be undefined otherwise)

So add fa-index="an-appropriately-sortable-number" to your fa-views and you should be good.

[holmesal]

Awesome! That did the trick for me. :+1: