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?
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>
Try this,
<ion-content color="primary" class="ion-padding"></ion-content>
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.
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;
}
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
Related
I need your help. I want to make the same header for all my application, so in app.component.html I prescribe ion_toolbar and ion-header before ion-router-outlet. However, I have a problem that this header of mine overlaps the content I have in the ion-router-outlet. I'm trying for the ion-toolbar to give margin-bottom: auto so that there are automatic deviations, but it doesn't react to that. Tell me, what is my mistake, how to make a hat and that it does not overlap the content? Thanks
app.component.html
<ion-app>
<ion-toolbar>
<ion-header>
<div>header</div>
</ion-header>
</ion-toolbar>
<ion-router-outlet></ion-router-outlet>
</ion-app>
app.component.scss
ion-toolbar {
height: 75px;
--margin-bottom: auto;
}
I’ve created a few components that handle form submission functionality. In each of these components, I want the form submit/cancel buttons to be fixed at the bottom of the view, much like the functionality available via ion-footer. The submit button needs reference to the variables + methods in the component for [disabled] + (tap) functionality, for example [disabled]="!formGroup.valid" (tap)="submitForm()"
If the component is a child of ion-content then there is no way to add ion-footer as it will be contained within ion-content, instead of below ion-content. At first glance, having ion-footer inside ion-content appears to view properly, but the rendering can be buggy especially in scroll situations. I went as far as setting a force-bottom css class with fixed position/bottom but it looks like the ionic javascript overrides fixed positioning when inside ion-content, so a pure CSS solution does not seem to be possible.
<ion-content>
<a-form-component>
</a-form-component>
</ion-content>
<ion-footer>
<!-- add a-form-component's button here -->
</ion-footer>
Any recommendations on how to achieve the desired functionality?
TIA
Let's say you have a page called page and a component called cp
inside page.html you have the component <cp></cp>
Inside cp.html you have
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div id="the-footer">
<button>login<button>
</div>
inside page.scss:
#the-footer{
background-color: #efefef;
text-align: center;
position: fixed;
width: 100%;
bottom: 0px;
z-index: 99999;
}
This will achieve the same result as ion-footer.
The div containing the button will always be visible regardless of the scrolling.
hope it helps
Is there a built-in way to set background color on <ion-content> in Ionic 3?
In Ionic 1, we could set the color scheme for <ion-content> using classes like content-stable. In newer versions of Ionic, you can set the color of certain components with input variables, for example <ion-navbar color="dark"> or <ion-item color="dark">.
I've tried this kind of input on ion-content but without any success. I could set background-color manually, for example style="background-color:#ddd;", but if there is a 'proper' way to do this in Ionic I would rather do that instead. What is the 'official' way to do this?
There is no official way of doing this. Ionic does not provide any attribute or API to change the background color of ion-content directly.
You will have to go through setting up the css yourself.
Just eg:
In your scss file :
.bg-style {
background: red;
}
and apply style to content as in your component Html file :
<ion-content class="bg-style">
In your app.scss add:
.content {
background: #f9f9f9;
}
In .scss file, you can try with:
ion-content { background-color: map-get($colors, dark) !important; }
In my application I've got an ItemReorder as described in the docs:
<ion-list reorder="true">
<ion-item *ngFor="let item of items">{{ item }}</ion-item>
</ion-list>
It works as intended, I can drag the ion-items by pointing at the reoder icon (see freehand circle):
Testing with potential users on a tablet I found out, many users don't see the icon at first and/or try to drag the ion-item without pointing at the icon. They expect the whole ion-item to be draggable:
How can I implement this? Any insight is appreciated!
I've already checked the docs twice, googled and found this unanswered question on the ionic forum and this plugin for Ionic v1. I also scanned the code on Github without success.
The ideea of this css solution is to have the reorder icon invisible above the zone which you want to reorder. I have changed the icons to be on the right side <ion-list side="start" and I have changed the css like this
Now for me it's working.
ion-reorder{
position: absolute;
width: 22%;
max-width: 100%;
opacity: 0;
}
The cons is that there is no more visible reorder icons.
I tried to override Ionic 2 scss variables to make a smaller with the following code put in my variable.scss:
$chip-button-border-radius: 20%;
$chip-button-size: 20px;
$chip-icon-size: 20px;
The API for chip can be found here
HTML:
<ion-chip color="dark">
<ion-label>Test small chip</ion-label>
</ion-chip>
The chip didn't change.
Am I missing something?