Calcultate collection item height of collection repeat

ionic-v1
#22

in controller

  $scope.getHeight = function (check) {
            if (check == null)
            {
                return 53;
            }
            else
            {
                return 70;
            }

};
in html–>

 <div collection-repeat="list in List1"
                         item-height="getHeight(list.FloorBlockName)">

same problem i faced…i did like this. :slight_smile:

#23

Still no great solution to use collection-repeat with items that have variable height that must be calculated on the fly (like text written by users, simply).

1 Like
#24

I solved this by pre-calculating the height of the items when created using a dummy measurement div and save it on the item.

1 Like
#25

Hi,

Can you explain how you did that?

Thanks

#26

Hello yohairosen,

I am trying to do something similar. I created a dummy element (which is a custom directive) and I compiled it against an isolated scope (created with $rootScope.$new()). I updated the directive’s scope with each of my items but since it is not rendered in the actual DOM how did you get the size ?

In order for the CSS rules to be applied did you insert it in the view ? Do you have a dummy directive as hidden ? But then how do you get the size for each item since by updating the scope of that element will not update the content instantly.

Thank you

#27

I encountered the same use case and I would like to share my solution for the problem.

First I created a dummy list-item that has the same style as the collection repeat (same width, icons, classes …).
Also add the specific style (visibility:hidden) to keep the height of the item, but don’t show it to the user.

<ion-item id="dummyItem" class="item-text-wrap item-icon-right" style="visibility: hidden;">
      <i class="icon ion-ios-arrow-forward"></i>
    </ion-item>

You can place this anywhere on your page (preferrably just before ion-content gets closed).

In the controller of the page, I create a dummy variable that holds the element of the dummyItem.
This makes sure that we don’t have to do an “getElementById” everything a dynamic height has to be calculated.
var dummy = document.getElementById("dummyItem");
I’ve placed this code at the top of the controller, outside a function, so it gets assigned with the load of the page.

The method to calculate the height works pretty easy. The text that you want to display gets passed to the function and the dummy text is changed with the received text.
After that we get the height of the dummyItem and return that.

$scope.getHeight = function(text)
{
dummy.textContent = text;
return dummy.clientHeight;
}

Back in the HTML of our collection-repeat, we add the item-height directive and pass the text of you want to use.

item-height="getHeight(article.name)

This has a very small hit on performance of the list, but in most cases you won’t even notice it. I’ve tested it with a list of 3300+ dynamic items and it just great and smooth.

1 Like
#28

Is it possible to somehow use this direction:

#29

thanks a lot
very nice

1 Like
#30

This last comment is related to? :slight_smile:

#31

As mentionned, reply for MattE

#32

What in case when you have more complex content inside ion-item element? Like for example couple of divs with expressions…

But ok, good try for a very simple scenario.