Collection-repeat not rendering size of item properly


Hi Friends, I am using Collection-repeat for creating a 2 column vertical scroll. But it is not working properly. I have a demo at .

I resize the photos to 320px x 320px in css. But some pictures are of different size.


Images overlap with collection-repeat and image ng-src

how did you implement collection-repeat?

also an codepen would be good.


@Auro. I have created a demo above you can check its source code.

I am also creating a codepen for you.



will this app be run on device? if yes then maybe 2 columns are not optimal.

i saw the code what i’m interested in is the html you used for collection repeat :smiley:


It is one of my friends requirement. I know that It will not expand on bigger devices like tablets. I need exactly 640px wide 2 column scroll. where each column is 320px wide. and scroll must be center align.

I think I am doing something wrong. I am not good in CSS.

@Auro Any Advice?

@mhartington any clue?


Each collection-repeat list will take up all of its parent scrollView's space. If you wish to have multiple lists on one page, put each list within its own ionScroll container.


@siddhartha Buddy, I never said that I need multiple lists. I said a vertical list with two column. It is quite different thing. Check this link It is working but size of item is same for each item.

I wonder why is thing happening, Either I am wrong(which is most obvious) or there is buy in collection-repeat.

@mhartington ?


so you want each picture the same size or with different?

if they are different i don’t think collection-repeat is the right, then i would implement a pull to load at the bottom.


@Auro I want them same. and I have created css according to it. But when I use it with collection-repeat. It renders with different size.



you mean something like this:


@Auro Almost like that. But with images center align and 2 columns only. It is 4 column. And can you tell me what I was doing wrong?

Thanks for help.


its are 4 rows because your monitor is so wide if you resize the codepen it will show 1 or 2.

on iphone it will show one picture
on ipad i’m not sure(i don’t remember size of ipad :-D)

i took your css so it should be centred. only problem if the monitor is too wide it will display more.

the problem was your collection-repeat implementation:
i change it to this:

<div class="myItem"
   collection-repeat="post in posts"

with my working % do not work well with collection-repeat, he likes more fixed with.


Thanks @Auro for such a good response.


Glad to see you guys got this.

Just to reiterate what was said here,

If you want to have a grid in you collection repeat list, adjust the collection-item-width, as per the docs


Oh OK! I visited the reference site you have linked. Seems like this should do it

  <div class="yourclass"
    collection-repeat="object in objects"
    collection-item-height="getItemHeight(object, $index)'">
    <img ng-src="{{ object.src}}">


Thanks. @Auro @mhartington @siddhartha.

I was just using px in collection-item-width. Which was wrong. Am I right?

Thanks. to all it is working cool now.


One more advice from you folks. In this app I want to do the following thing.

This is the Home View.

When User Clicks on an Image. Image Enlarge to 640 x 640. Like this.

I figured out I have to change both style and item size in collection-item-height and collection-item-width.

Any advice you can give me or suggest me a better way. @Auro


i would not do it this way i think its too complicated withcoletion repeater.
i would so something with modal or popup. just pass an id or an item and show the big picture.


Does anyone have any examples of advanced collection-repeats with multiple columns? Like using multiple divs (image + text area etc). I can only get it to work with a single image. As soon as I add more divs everything kinda goes bonkers.

Any tips?