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

Ionic Framework ionic-v3
1

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.

2

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;
}
3

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

4

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