discodane discodane - 3 months ago 73
CSS Question

Ionic 2: make ion-list items smaller

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

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 ).