Ionic 2: make ion-list items smaller

Question

There is a similar question here, but it pertains to ionic 1 where the ion-item still has ion-content. In ionic-2 there is not ionic-content. I've tried changing the height/padding/margin of the actual ion-item, and the class item-inner and can't seem to get a uniform "skinny-ing" of the ion-items.

Question: How do I make the ion-items in an ion-list skinnier/smaller/not as tall in ionic 2? Ps. this is using ionic 2 beta 10

Answer 1

I found that the main issue with this is in the app.ios.css file native to ionic that the .item class that gets assigned to the ion-item element gets a min-height assigned to it of 4.4 rem. I'm not sure where that value came from or why it's 4.4. So, in my .scss file pertaining to the list, I just added:

.item {
    min-height: 3rem; /* <- this can be whatever you need */
}

This made it so any changes that I made to the margins( I ended up changing the margin to 0 8px 0 0 respectively ) of the inner elements actually changed the height of the list item because they weren't bumping up against a min-height setting. See other answer for where to change the margin.

Without changing the min-height of the list item, any changes to the margins of the inner elements didn't do anything (at least for me ).

Answer 2

Change the top-bottom padding on <ion-label>. The default is this:

ion-label {
  margin: 13px 8px 13px 0;
}