Weird Collection Repeat Behavior

Reference CodePen:

So, I took a ng-repeat and made it a collection-repeat. In that collection repeat, I set the width to 100%. This gave me un expected behavior.


So, I tried setting the following CSS, and it made it work as expected.

.item {

I also noticed in the docs that it says I need to use the following CSS which seems to accomplish the same as the CSS I used.

.my-item {
  left: 0;
  right: 0;

This seems like a weird behavior to me (possibly a misunderstanding). I figured if I said 100% it would assume I mean width: 100%.

Next experiment is setting collection-item-width to 25% and leaving the suggested css (left: 0, right: 0). This gave even weirder behavior. The items were all over the place.

To fix this, I had to put in my css for list items width:25%.

Am I just misunderstanding something here? Do the docs need to be updated to be a little more clear?

Hey @andrewmcgivery

Yeah collection-repeat needs a facelift soon.
Somewhere along the way, some bugs showed up.

Would you mind opening and issue for this?

codepen or collection-repeat? :stuck_out_tongue:

1 Like


its been a long day