Issue with the width of an item in collection-repeat


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:

    <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>

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?



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


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.


1 Like

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