Ionic 5 content padding is not working like Ionic 4?

0

I upgraded from Ionic 4 to Ionic 5, why the padding attribute is not working:

<ion-content color="primary" padding></ion-content>
1
0

According to the official documentation, you can use these CSS custom properties to set padding of ion-content component:

–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

–padding-start Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content

–padding-top Top padding of the content

In the SCSS file associated with your component, add:

ion-content {
  --padding-bottom: 10px;
  --padding-end: 10px;
  --padding-start: 20px;
  --padding-top: 20px;
}

This should add padding inside the content area.

A second fix is to replace all your attributes to CSS classes:

<ion-content color="primary" class="ion-padding"></ion-content>

 

Skip to toolbar