<ion-list> <ion-item> padding left

Hi,

I noticed there is a padding applied on ion-item under the following class (This is in ionic 2)

.item-md {
  padding-left: 16px;
}

I tried using no-padding which did not work either.

The padding is fine for the text but is causing a gap in the line separator between the ion-items, what would be the standard way to get rid of it. Also preferably keep the text padding.

Check the image below

This is native settings app of iphone and it has the same ‘not full border lines’ as well, so i guess it is fine to have them :slight_smile:

anyway if you want to make them full length here what to do

ion-item .item-inner {
   border-bottom: 0px!important;
}

ion-item {
   border-bottom: 0.55px solid #c8c7cc!important;
}

Do you know how you could remove the padding itself as well

use the utility attributes:

<ion-item no-padding>

more info here https://ionicframework.com/docs/v2/theming/css-utilities/

also try to use !important as little as possible instead have a look at the theme overides:

$item-md-divider-padding
$item-md-padding-bottom

just search for list

2 Likes