Collection repeat height

Collection repeat height between items is different for different devices


Can any one help why this happening

Thanks in advance

Create your own class for item with fixed height and assign that class with your ellement

Thanks for your response but how can I create a class with fixed height?
there are lot of devices with different screen resolutions
Here is my code pen could you please show me an example?
Sorry for troubling

Not quite sure I understand the problem from the images, but collection-repeat has an item-height attribute that you can use to hard code the height (pixels or percentage). Note that if you choose to use this (I use it in pixels), and your user changes system font size, it will cause problems, so to be safe, I also use https://github.com/phonegap/phonegap-mobile-accessibility to get the text font zoom factor and multiply the height for a normal case with that factor.

@pliablepixels
Thanks for you response can you please provide codepen or some other sources I can refer?
Thanks in advance

Its just an attribute - read and try.
http://ionicframework.com/docs/api/directive/collectionRepeat/ read the part about item-height

How I use it
template: https://github.com/pliablepixels/zmNinja/blob/master/www/templates/events.html#L47
calculation of height based on font setting:
https://github.com/pliablepixels/zmNinja/blob/master/www/js/EventCtrl.js#L91
https://github.com/pliablepixels/zmNinja/blob/master/www/js/EventCtrl.js#L156-L160