Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove the padding around ion-item?

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.

like image 445
Aditya Avatar asked Mar 30 '18 06:03

Aditya


People also ask

How do you give padding for ion content?

In Ionic 5, there are some changes regarding how we set padding of the ion-content component. We set the padding by using these CSS custom properties: --padding-bottom Bottom padding of the content. --padding-end Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content.

How do you remove Click effect from an ion-item?

Solution. Simply give pointer-events:none css to disable click.

How do you hide ion items?

In Ionic 4 you can use ion-hide as well as add breakpoints to determine when to hide based on the screen width.


3 Answers

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
}
like image 64
massi Avatar answered Oct 14 '22 00:10

massi


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 ).

like image 35
Utpaul Avatar answered Oct 14 '22 00:10

Utpaul


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;
}
like image 9
Shakur Avatar answered Oct 14 '22 00:10

Shakur