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
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 ).
Change the top-bottom padding on <ion-label>
. The default is this:
ion-label {
margin: 13px 8px 13px 0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.