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.
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.
Solution. Simply give pointer-events:none css to disable click.
In Ionic 4 you can use ion-hide as well as add breakpoints to determine when to hide based on the screen width.
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
}
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 ).
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With