Work with responsive items

[jrdn91]

I'm attempting to use this addon with a list of items on a mobile oriented app. The items currently take up the full width of the window, and have an image within them, so the height will not always be the same as that image is going to grow to fit the item container and thus it's height will grow making the whole item (that the collection is rendering) taller. How would I handle this with the collection so that it works responsively?

[raytiley]

Do you know the aspect ratios of the images you are iterating over? The only way to do this currently is to create a layout that will return the correct width and height for each item in the collection.

Currently ember-collection doesn't support scenarios where you let the browser layout the items and then measure afterwards.

[g-cassie]

We have written a super hacky code to calculate height on elements by pre-rendering them in a div off the screen. AFIK this is the only way to support variable height items. If you know that the items will either be one of two heights you could probably make a custom layout fairly easily to support this.

[dfreeman]

We've done something similar where items are rendered in place in the collection and measured (in batches), then the layout is tweaked accordingly. It gets the job done, but I have no doubt someone with a better overall grasp of Glimmer could do it better.