Skip to content

Using collection-repeat with dynamic item heights #1691

@CoenWarmer

Description

@CoenWarmer

I have a long list of items that have varying heights. In order to get the best performance on Android, I would like to use collection-repeat.

I am now running into trouble determining the height of each item to supply to the getItemHeight function.

Consider the following:

$scope.getItemHeight = function(item, index) {
   console.log('index',index);
   var ul=document.getElementsByTagName('ul')[0];
   var li=ul.getElementsByTagName('li')[index];
   return li.offsetHeight;
};

The li item isn't rendered yet by this point so the height can't be determined yet.

Once you wrap it in a timeout, the li item is known, but the list doesn't render:

$scope.getItemHeight = function(item, index) {
   console.log('index',index);
   setTimeout(function(){
      var ul=document.getElementsByTagName('ul')[0];
      var li=ul.getElementsByTagName('li')[index];
      return li.offsetHeight;
   },2000)
};

Check out this Codepen:
http://codepen.io/squrler/pen/qxKkC?editors=001

Is it possible at all to determine the height of each element and then pass that to the getItemHeight function of collection-repeat?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions