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.
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 ).
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
}
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;
}
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
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;">
...
If you prefer not to add no-padding to every ion-item, and remove it for the whole app.
For ionic v4 , you can add this to global.scss:
ion-item {
--padding-start: 0;
}
Source: https://ionicframework.com/docs/api/item#css-custom-properties
Removing padding from the content of the page solves the problem
<ion-content>
<ion-list>
<ion-item>
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
</ion-list>
</ion-content>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.