ember-collection icon indicating copy to clipboard operation
ember-collection copied to clipboard

items of different heights or dynamic heights

Open lhluo opened this issue 8 years ago • 1 comments

Without pre-rendering and measuring, is there support for items with heights which are not know before hand? If not, I tried a work-around where all items are the same height, but expandable. But is this supported since the height has to change dynamically? I tried the following for a expandable list item:

{{#ember-collection
  items=model
  cell-layout=(mixed-grid-layout dimensions) as |item index|
}} 

Then, in Ember, i changed to height of one item via this.get('dimensions').replace(index,1,[{width:1000, height:2000}]); But ember-collection doesnt seem to observe the dimensions array. How can I support either of the above cases?

lhluo avatar Mar 13 '16 23:03 lhluo

I have variable heights working. I built a custom layout which tracks both the height of each object and the cumulative height of everything before it. It implements a method called updateHeight. I subclassed ember-collection so that every 100ms it checks the heights of all ember-collection cells in the DOM and calls layout.updateHeight() with the new values. This gets the job done however there is a glitchy moment where all the rows overlap while ember-collection is first checking the heights of the newly rendered rows.

I previously had a more complicated system where I rendered things off screen to check height before inserting them but ultimately it was more trouble than it was worth.

g-cassie avatar Apr 01 '16 16:04 g-cassie