Collection-repeat inside a slide-box - responsive (but not dynamic) height?

ionic-v1
1

Having a lot of trouble with collection-repeat inside a slide-box.

I have a slide box that performs a search query and then populates a large list of images in a grid. Currently using ng-repeat but I’m having really bad performance (and crashes). i thought collection repeat would be a good option, but I’m really having a hard time making it work. A couple of issues:

  1. I understand that dynamic item heights are not advisable, as seen in multiple threads on the forum. However, what I really don’t understand is how you set the height of the item to flow nicely on different screen sizes and at least be responsive to different screen orientations. When I set the item-width, For instance, I’d like to set the item-height to some proportion of the width (for instance 1.0 to create square items). Is that possible?

  2. What is the best way to structure the HTML within the ion-slide? wrap the collection-repeat in an ion-content? That’s what I’m doing now.

Thanks.

2

For collection-repeat in a slide box you can do this

For the height part, not really.
You should check out the blog post on why the height needs to be fixed.
http://ionicframework.com/blog/collection-repeat/

3

Thanks, mh. I had crafted my own response but never posted it. See below.

OK, I’ve answered a few of my questions by digging around. Managed to calculate the height properly by calling a function that uses the $(window).width() method and calculates accordingly. Got inspiration here:

I am also having problems with items disappearing too soon, before they leave the frame. Also not being able to scroll all the way to the bottom to get the last item above the footer. Saw this in another post here on the forum…

Will keep digging.