Remove space between list items

1

Hi everyone, I am quite new in develop with Ionic, this is a small css issue I am running into. I have created a codepen page to demo this: http://codepen.io/anon/pen/MYeYqx Basically what I want to do is to remove the little space between two list items (space between images in this example). In this example:the ion-item has a height 717px, the element has a height of 710px, how do we make the ion-item the same height as the image? Thanks in advance for your help. c.l.

2

Hmmm, you can remove 2px on the border of ion-item

ion-item {
   border-top: none;
   border-bottom: none;
}

But I’ve no clue why the remaining 5px is applied… I think it’s either ionic trying to do something awesome (ion-content directive I suppose) or angular doing something really annoying (which would be the ng-repeat I guess)

Haven’t dived into the code, so I’m not sure… But this doesn’t seem like an easy css issue to me, I believe the extra 5px is applied to javascript… But I could be wrong because I didn’t spend to much time on it :wink:

3

Just modify your program like this

in the html:

 <ion-item ng-repeat="item in items" item="item"  href="#/item/{{item.id}" class="haut">

…

in the css:

.haut { height: 710px; }

4

Wow, that worked XD I’ve implemented both my suggestion and @jimibi’s tip in the following codpen:

I’m still curious where the 5px come from (which are still there, just hidden now!)

5

Is there a solution that doesn’t need to hard code the ion-item height? An obvious reason is on mobile horizontal and portrait view, the height will be different.

6

I think this solution will be perfect:

7

This works, thanks. :slight_smile: