Dynamic height in collection-repeat please

ionic-v1
1

Dear All

Any solution for dynamic height in collection-repeat ?

Thank you :smile:

2

item-height allows for expressions to be used so you can create a function that should determine the items height

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

3

Hi @mhartington,

I’ve used this approach item-height=“getStepHeight(step)” but i think is not good because for dirty check rules it is invoked multiple times not only one for item in the collection.

But more big problem is that:
If you edit an item in the collection that contain text for example and you add more text, the height of the item doesn’t refresh itself the function getStepHeight(step) isn’t called and the height of the item stay the same

the function is something like that

$scope.getStepHeight = function (step) {
      var headerH = 80;
      var imageH = 320;
      var socialH = 40;
      var diaryStepWrapper = 25;
      var finalH = diaryStepWrapper + headerH + socialH;
      if(step.image){
        finalH += imageH;
      }

      if(step.description){
        var textEl = document.getElementById(step.$id+'Description');
        if(textEl){
          var textH = ionic.DomUtil.getTextBounds(textEl).height;
          finalH += textH +20;
        }
      }
      return finalH;
    }

Maybe a better solution is iterate the array and calculate there the height of item before to assign a variable for the collection-repeat, like as your example in docs for horizontal scroll with dynamic height

1 Like