Height Problems with collection repeat

Hello, I am having a strange bug with collection repeat items.
There is a problem with the height between items, only in phone portrait mode (in landscape mode, this problem doesn’t exist).

I am not sure if this is ionic something other… i checked it in intel xdk and it shows the correct margins between items in the emulator, but when exporting in crosswalk, the margins are still there… did anyone else notice this?

Any help would be appreciated :slight_smile:

Here is a url with my app…

@mharington, any chance you can help me here?

On which devices or you testing it?
Android or only iOS or both?

Maybe there are platform specific css-classes for your device the emulate does not show up ?

Hi bengtlr, thanks for writing… I am using a lg g3 with android 5 currently…so it may be a bug in the webview, but i am not sure…

So you are saying you can see everything good and also the margin between each news element is the same height in your phone?

nope but thats because of your cards in it.

look -> if your title is to long -> it breaks and your card is higher than the others :wink:

And because the item in the collection are absolutly positionated -> it looks like a different margin.

Hi bengtler, that is ofcourse true :)… but i admit that i don’t know how to fix this?
should i somehow limit the title (i don’t know how…), or should i make the colleciont repeat items in %? i tried it i think but it didn’t work…

what is the best approach for this?


i would limit the title (via javascript substring or css http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/).

A very slow solution, to make function to get the height of the current visible dom element (you can set a function instead of fixed % or px value for collection-item-height). But i think this will blow up your app^^.