Collection-repeat with responsive height

ionic-v1
1

Hi All!

I am suffering from terrible performance with ng-repeat and implementing ReactJS has its own kinks. I would like to try using collection-repeat for my lists.

I understand that collection-repeat can’t be cleanly used for items with variable height, but for my purpose, I know that every list item will be the same height. My problem is that I want my list items to look more like a list and not be weirdly spaced as like this screenshot here (names blurred for privacy reasons): http://i.imgur.com/A0uQlWN.png

Using a different device will have different amount of awkward gaps in between list elements. How can I make the height responsive so that they will be nicely touching each other?

Thanks

2

Could you supply a codepen to demonstrate your issue? I think it’s fairly easy to fix your problem if we get such an example. (Of course, dummy names are fine)

3

I just tried my collection-repeat on many different devices. The space between each list element appeared constant across all devices. I am just returning an integer from my controller. Are you using your custom list element or the built in Ionic cards?

4

Can you paste the collection-repeat tag from your code. Just the skeleton with the respective CSS classes ?

5

Here is the code for the screenshot from my first post. I was trying to use ion-item’s as part of an ion-list:

  <ion-list>
    <ion-item collection-repeat="clientperson in (clientd | filter:searchKey)"
              collection-item-width="'100%'"
              collection-item-height="'25%'"
              type="item-text-wrap"
              href="#/app/clients/{{clientperson.uid}}"
              class="item-avatar">
              <img src="img/blank_contact.jpg">
              <h3>{{clientperson.firstname}} {{clientperson.lastname}}</h3>
              <small>{{clientperson.c_name}}<br>
              {{clientperson.title}}</small>
    </ion-item>
  </ion-list>

And now I’m trying to use cards with the following tags below to get this: http://i.imgur.com/F9p3K4h.png <div class=“card” collection-repeat=“clientperson in clientd”

 <div class="card" collection-repeat="clientperson in clientd"
              collection-item-width="'100%'"
              collection-item-height="'30%'"
              ng-style="{height: getItemHeight(item, $index), left: 0, right: 0}"
              type="item-text-wrap"
              href="#/app/clients/{{clientperson.uid}}"
              class="item-avatar">
              <img src="img/blank_contact.jpg">
              <h3>{{clientperson.firstname}} {{clientperson.lastname}}</h3>
              <small>{{clientperson.c_name}}<br>
              {{clientperson.title}}</small>
  </div>