Why Ionic 5 content padding is not working?

Question

When upgraded to Ionic 5, the padding attribute is not working anymore as in Ionic 4:

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

Any fixes?

Similarity

Answer 1

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.

Serpentine

This answer/solution will definitely work but what the author is asking is basically a breaking change in Ionic v5. So the correct solution is to use the new attribute ion-padding. – Gilligan

Answer 2

Story in Ionic v4:

Use of attributes got deprecated in Ionic v4 and if you would have noticed in developers console, Ionic 4 was throwing warnings of using these attributes to style.

Story in Ionic v5:

In Ionic v5, these attributes got removed permanently and got replaced with CSS classes. So even if those attributes there in your code, no effect will be there.

As per the Breaking Changes https://github.com/ionic-team/ionic/blob/v5.0.0/BREAKING.md#css:

We originally added CSS utility attributes for styling components because it was a quick and easy way to wrap text or add padding to an element. Once we added support for multiple frameworks as part of our "Ionic for everyone" approach, we quickly determined there were problems with using CSS attributes with frameworks that use JSX and Typescript. In order to solve this we added CSS classes. Rather than support CSS attributes in certain frameworks and classes in others, we decided to remove the CSS attributes and support what works in all of them, classes, for consistency. In addition to this, changing to classes prefixed with ion avoids conflict with native attributes and user's CSS. In the latest version of Ionic 4, there are deprecation warnings printed in the console to show what the new classes are, and the documentation has been updated since support for classes was added to remove all references to attributes

Solution:

You need to replace all your attributes to CSS classes. For example:

Before

<ion-header text-center></ion-header>
<ion-content padding></ion-content>

After

<ion-header class="ion-text-center"></ion-header>
<ion-content class="ion-padding"></ion-content>

For your case, replace

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

to

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

Gilligan

Answer 3

Try this,

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

Sall

Answer 4

In ionic 4 and Ionic 5 the use of padding like this:

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

and see https://ionicframework.com/docs/layout/css-utilities

Pinwork

Adding a code sample to your answer instead of relying on linked content is best practice here. This way, if the site URL changes or retires, the answer is still valid. – Domesticity

Answer 5

    ion-item {
      --padding-start: 10px;
      --padding-end: 10px;
      --padding-top: 0px;
      --padding-bottom: 0px;
      --inner-padding-top: 0px;
      --inner-padding-bottom: 0px;
      --inner-padding-start: 0px;
      --inner-padding-end: 0px;
      --border-width: 0;
      --inner-border-width: 0;
      --border-color: transparent;
    }
    ion-header {
      --min-height: auto;
    }

Katharina