Why Ionic 5 content padding is not working?

6
votes

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?

8
ionic-frameworkionic5
Consider replacing your attribute padding to CSS class ion-padding. Check my answer. - Shashank Agrawal

8 Answers

10
votes

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>
2
votes

Try this,

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

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.

0
votes

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

Ionic Framework provides a set of CSS utility classes that can be used on any element in order to modify the text, element placement or adjust the padding and margin.

0
votes
    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;
    }
0
votes

The paading you are using like this is deprecated in Ionic 5.

Now you can use like this

-1
votes

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

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

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

The use of padding like this is deprecated and now we can use this instead:

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