bug: Weird Collection Repeat Behavior

[andrewmcgivery]

Type: bug

Platform: all

Reference CodePen: http://codepen.io/andrewmcgivery/pen/ogGmNW

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 {
width:100%
}

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?

[andrewmcgivery]

Screen shots of behavior:

http://ionic-forum-uploads.s3.amazonaws.com/8997262d469dca47187ac11e173045295fc749d251a4.PNG

http://ionic-forum-uploads.s3.amazonaws.com/24315b89fa21bf35cc2170c5c7a141fe651c200ebf7c5_690x159.PNG

[ajoslin]

Could you post a little bit of markup for each of your examples?

Not sure I'm understanding the problem here.

[andrewmcgivery]

From the CodePen...

First Example

<ion-item class="item-avatar" collection-repeat="item in items" collection-item-width="'100%'" collection-item-height="'70px'">
    <img src="{{item.user.picture.thumbnail}} " />
    <h2>{{item.user.name.first}} {{item.user.name.last}}</h2>
    <p>{{item.user.location.city}} {{item.user.password}}</p>
</ion-item>

Second Example

<ion-item class="item-avatar" collection-repeat="item in items" collection-item-width="'25%'" collection-item-height="'70px'">
    <img src="{{item.user.picture.thumbnail}} " />
    <h2>{{item.user.name.first}} {{item.user.name.last}}</h2>
    <p>{{item.user.location.city}} {{item.user.password}}</p>
</ion-item>

[ajoslin]

Oh, I didn't see the codepen! My fault.

[ajoslin]

Both 25% and 100% seem to be working as intended for me.

collection-repeat's default behavior should probably do the width: 100% for you, to cover 99% of cases.

[andrewmcgivery]

I changed the codepen to the 25% example. Scroll up and down a bit and the layout will start to mess up.

[ajoslin]

@andrewmcgivery this is actually just a CSS bug. The height of your items in css is different than the amount defined by collection-item-height.

I'm going to commit a fix that will make items' width and height css-wise equal their width and height in the collection repeat grid.