How to remove the padding around ion-item?

Question

I want to remove padding from my ion-item so that it can occupy the full width of the page.

Please look in the dev tools to see the padding around the ion-item.

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-thumbnail>
        <img class="imgmg" src="...">
      </ion-thumbnail> 
      <h2>Text</h2>
    </ion-item>
  </ion-list>
</ion-content>

The ion-item has a padding of 16px, when I inspect the ion-item and also on the class="scroll-content" there I found scss in the inspector with

ion-app.md [padding] .scroll-content {
    padding: 16px;
}

If I remove this padding then ion-item can occupy the whole width by removing this padding, but When I use this in my scss file the padding is not removed.

Solution 1

You can solve ion-item padding different way...

First: Using ion-no-padding class

<ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Second: Using css or inline style

<ion-item style="padding:0px !important;">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Edit : As Ionic 5.X we must use CSS utilities by class instead of attributes ( ionic/BREAKING.md ).

Solution 2

For those who are using ionic 4, you should use Ionic CSS Utilties for padding

In short, you have to code this:

<ion-item class="ion-no-padding">
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

If you want to remove inner paddding, use ion-item custom CSS properties:

ion-item {
  --padding-end: 0px;
  --inner-padding-end: 0px;
  // here other custom CSS from documentation
}

Solution 3

I had to use custom CSS properties for ion-item

ion-item {
  --inner-padding-bottom: 0;
  --inner-padding-end: 0;
  --inner-padding-start: 0;
  --inner-padding-top: 0;
}

Solution 4

just give no-padding to ion-item it will remove the padding

<ion-item no-padding>
  <ion-thumbnail>
    <img class="imgmg" src="...">
  </ion-thumbnail> 
  <h2>Text</h2>
</ion-item>

Refer the ionic docs

Solution 5

Also had the same maddening problem. It turns out that ion-item has a few --inner-padding rules that need to be overridden to stop padding appearing on it's children

As well as adding the

class="ion-no-padding"

I also needed to add the following css style rule

--inner-padding-end: 0 !important;

Making the final element

<ion-item *virtualItem="let section" lines="none" class="ion-no-padding" style="--inner-padding-end: 0 !important;">
...

View more solutions

Comments

[Jeremy]

try to add an id = 'ion-overrides' or whatever you want to call it to your body element and then in your scss change the ion-app.md [padding] .scroll-content {...} to #ion-overrides ion-app.md [padding] .scroll-content {...}. You might need to specify the element in more detail because the css for the ion elements get added after yours and so it overrides your css.

[Aditya]

but how can I add the id to ion-app .md ?

[Utpaul]

@Aditya i solve your problem please check it

[Aditya]

I am upvoting your answer because I got idea from your answer.

[Pom12]

Please explain why your answer solves the initial problem, and also add some example if needed.

[Utpaul]

This solution for ionic 3 @WoIIe

[nios]

This will not remove padding from item-inner

[SeekingMoneky]

Method 1 works for most of the padding. But it doesn't seem to override the logical css, so I am left with some calculated padding attached to the padding-inline-end property under the item-inner class. Has anyone found a solution to this? padding-inline-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));

[Nikola Noxious Dimitrov]

ionicframework.com/docs/api/item#css-custom-properties It has all the properties and css4 variables.

[SimonBarker]

This is a much more comprehensive answer than the accepted one

[BHinkson]

One issue that I had is that I was putting these on an inner (child) element and these need to go on the ion-item (parent) element. For this to work. Facepalm!

[BanAnanas]

For Ionic 5.X, what do I do if I wish to use margin and text-right, I can only have one class.

[Admin]

@BanAnanas can you add more than one class? If someone is not forbidding you to use more than one class, you can add multible classes separating them with ` ` (space), i.e. class="class1 class2 classN"