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

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

Solution 2

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

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

Comments

[discodane]

The .item-inner/.input-wrapper/ion-item still seem to be dictating the height of the the item itself even when I change to "margin: 0 8px 0 0"

[amuramoto]

Did you not see a change in height when you altered the top and bottom margin of ion-label? Or did it not affect it enough?

[discodane]

Neither. Check out this plunker plnkr.co/edit/4CnShy3SsdHE1iXQW2SJ?p=preview. In the style.css you can change the top and bottom margin amounts and there is no apparent change

[amuramoto]

It appears ionic is assigning a more specific margin def for .md ion-label. I think the problem is that you have your ion-label definition in styles.css. In a normal ionic project, you should have your css at the component level in home.scss or global in one of the scss files in app/theme. That way Ionic knows to automatically use that over its defaults. If you need to have it in styles.css, add !important to your margin css definition.