My css style is not apply in the "collection-repeat"

ionic-v1
1

Hi,

My css style is not apply in the “collection-repeat”. it’s work in ng-repeat ! I don’t understand.

Thanks a lot

2

Collection-repeat absolutely positions each element in your array. You need to add styling to make it take up the entire width, and because it has to be a set height you have to style the items using line-height and height in addition to the collection-item-height.

Here is some styling I’ve added:

<tr collection-repeat="customer in customers track by $index" 
    collection-item-height="35" 
    collection-item-width="'100%'"
    style="height: 35px; line-height: 35px; left: 0; right: 0;" 
    ng-class="{'gray-background': $index % 2 == 0}">

Also, if you aren’t set on using a table, can I suggest using the grids Ionic provides?

I didn’t mess around too much with the widths of the table, but here is the codepen where I modified some styling.

I’m not entirely sure why but it seems like padding won’t work on items inside of the collection-repeat. The codepen created by Ionic removes the padding. I assume this is because of the set height.

3

Thank you for your response.
I solve my problem with grids: Explicit Column Sizes
BR

1 Like
4

@brandyshea Why does the height have to be a constant? Is it possible to have it ‘auto’?

5

The latest collection-repeat directive (in the RC versions) doesn’t need a defined height. If you don’t declare the height it will use the first item’s height for all of the items.

From the docs:

If the item-height and item-width attributes are not supplied, it will be assumed that every item in the list has the same dimensions as the first item.

So you can’t specifically pass ‘auto’, but you could leave the attribute off to use the height of the first item, or call a function that returns the height in pixels/percentage if your items have dynamic heights.

6

@brandyshea I see. I don’t know what I’m doing wrong then. If you know the answer this question, How to make a grid when using collection-repeat? , I’d appreciate it.