Remove left padding ionic-item Ionic

Ionic Framework ionic-v3
1

Is there an existing Ionic style I can use to remove the left padding on an <ion-item>?

IonicPaddingLeftItem

This post shows how to do it in Ionic 1 and I got things working with my own styles as follows:

Item code:
<ion-item class="no-padding" text-center>Position</ion-item>
Item css:

.item-no-padding {
    padding-left: 0px;
  }

Is there a better way to do this or a style from the Ionic team I can use to achieve the same result?

2

you don’t put no-padding in class=""

<ion-item no-margin no-padding></ion-item>

and you might want to use

margin-left

instead

1 Like
3

There is an ionic prop for this.

<ion-item lines="full"></ion-item>
2 Likes
4

This seems to be not documented on the ion-item page…

5

You should use !important as following:

<ion-item class="noPaddingClass" text-center>Position</ion-item>

.noPaddingClass {
    padding: 0 !important;
  }

It is needed to overwrite ionic default style.