Issue with the width of an item in collection-repeat

ionic-v1
1

Hi,

I’m using collection-repeat for the first time, to loop through a set of over 3000 records. The performance is amazing. The issue I have is that each item does not fit the full width of the view.

I’m displaying a set of names, and each name may have a different number of characters. This causes each item in the list to be a different width. Here’s how I’ve set up my view:

<ion-content>
    <div class="list">
        <a class="item item-icon-right" collection-repeat="item in items" collection-item-height="'54'" collection-item-width="'100%'" href="#/tab/contactDetails">
            {{item.f}} {{item.s}} {{item.$index}}
            <i class="icon ion-chevron-right icon-accessory"></i>
        </a>
    </div>
</ion-content>

I’ve set the collection-item-width to be 100%, but this doesn’t set the items width to be the full width of the view.

Anyone know what I’m missing?

Thanks

Stephen

2

Which version of Ionic are you using? You can run ionic info from the command line to get this:

Your system information:

OS: Mac OS X Mavericks
Node Version: v0.12.2
Cordova CLI: 4.2.0
Ionic Version: 1.0.0-rc.2
Ionic CLI Version: 1.3.19

If your version is beta you will need to add this CSS:

.item {
  left: 0;
  right: 0;
}
1 Like
3

Hi,

That’s eventually what we did, works great now. I think what totally threw me was all the examples I’ve seen have the width as “‘100%’”.

Still it works now and I’ll use that CSS trick the next time I use collection-repeat, which is so fast.

Thanks for replying.

Stephen

1 Like
4

Yes the older versions of collection-repeat require both width to be 100% and the css for left/right to be set. If you update to the Ionic release candidate versions you won’t have to set this anymore. :smile:

1 Like