Why Ionic 5 content padding is not working?

问题

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?

回答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.

回答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>

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

回答3:

Try this,

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

回答4:

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.

回答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;
    }

回答6:

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

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

来源：https://stackoverflow.com/questions/60199972/why-ionic-5-content-padding-is-not-working

标签

ionic-framework

ionic5