Collection-repeat not rendering size of item properly

ionic-v1
1

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 http://apps.inders.in/2scroll .

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

Thanks.

2

how did you implement collection-repeat?

also an codepen would be good.

3

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

I am also creating a codepen for you.

Thanks.

4

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:

5

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?
Thanks.

6

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.

7

@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 http://apps.inders.in/2scroll 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 ?

8

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.

9

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

10

@imsingh

you mean something like this:

 http://codepen.io/Auro/pen/tzwpG
11

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

12

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"
   collection-item-width="320"
   collection-item-height="320">

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

13

Thanks @Auro for such a good response.

14

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

http://ionicframework.com/docs/api/directive/collectionRepeat/

15

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

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

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.

17

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

18

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.

19

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?