Bug in grid usage of collection-repeat

ionic-v1
1

I want to put a list of fix-size icons in grid manner.
So I tried the grid usage of collection-repeat, just the same as the example in the document, except I set the height to some number (200, you can change that):

<ion-content><div class="item item-avatar my-image-item"
collection-repeat="image in images"
collection-item-width="'33%'"
collection-item-height="'200'">
<img ng-src=""></div></ion-content>

Then I find it only shows two row of the icons, although there are 13 icons in the $scope.images.

2

How large is your device screen in pixels? Try setting your item-height to 50px for example, does it show more? If this doesn’t work, could you provide a codepen that reproduces the problem?

3

Yes, see this codepen example.
It seems has nothing to do with my device.
I have set the item-height to 50. But it does not show more.

4

I found the problem, and it seems like logical behaviour to me… Although indesired.

Basically, collection-repeat’s collection-item-height sets the height for each item! In your case, you have 3 items per row, but the height calculates for 3 items, therefore, limiting the visible rows to the visible viewport size divided by three. I have tested (and proofed) this by changing your height value divided by 3, although items are overlapping now (because they are 1/3rd of their height), all items that should be visible are visible.

Bascially, the “ïtems” in the collection, should be the row, and not the columns… As far as goes for the height anyways.

This would be logical behaviour in my opinion, for manual grid addition in the inner’s of the collection-repeat, you should iterate over rows and render columns inside of it… But! This grid is made using ionics collection-repeat grid usage (the 33% width setting) and in my opinion the directive should generate a nice grid system and calculate the height for the rows instead of the columns (items)

Basically, I think collection-repeat should be adapted to change the calculation of the height for each item. I made a quick and dirty example for a quick fix:

var item-height = collection-item-height;
if( collection-item-height.substr(collection-item-height.length - 1, 1) == "%" ) {
  var percentage = collection-item-height.substr(0, collection-item-height.length - 1);
  var amountOfTimesTheItemFitsInArow = 1;
  for( var i = 2; i < 500; i++ ) { //It's only usefull if the item fits at least twice in a row, 500+ items in a row sounds impossible on current viewports, even in desktop browsers)
      if( percentage < 1/i ) {
         amountOfTimesTheItemFitsInArow = i;
      } else {
        break; //We can break loop when we found the first amount of items that doesn't fit, it'll never fit again from here
     }
  }
  item-height = collection-item-height / amountOfTimesTheItemFitsInArow;
}
/*item-height now is the height that should be taken into consideration for the collection-repeat item height, while collection-item-height should be the height that has to be applied to the individual items.*/

Of course, this is just a quick and dirty fix… But it would work :wink:

@mhartington any thoughts on this?

5

@iwantwin Thank you for your quick response and helpful tips.

I find that if I set collection-item-height to some number with collection-item-height=“200” (note there is no single quote), it just works. While if it is some percentage, then it must be single-quoted.

6

Yes, the collection-item-height expects a javascript statement, an integer is written without quotes, while a string (with the percentage sign) needs quotes. You could also pass in a function call for example :wink:

7

In this case, the document of collection-repeat must be modified accordingly. It contains an example using single-quoted number for width/height.

Another issue is that even I have set the width of an collection-item, when the text is too long to show in it, the item just expands. While I think it will be more reasonable to keep the size fixed, and hide the text just as an item of ion-list does.

8

56 == “56” returns true, so it doesn’t really matter to much for the documentation, for consistency’s sake setting real values directly should always be done in single quotes, which also has a quicker learning curve. So I don’t really think documentation is an issue here.

I totally agree that when the widht and height are set, overflowing those dimensions should be prohibited as expected behaviour. (But updating might break existing apps)

9

Make sense. But then I am lost, why did It work when I just replaced collection-item-height="‘200’" with collection-item-height=“200” in original codepen example?

Well, I think it worths the update.