I have a simple page (screen):
<ion-header>
<ion-toolbar color="primary">
<ion-searchbar
placeholder="Search"
(ionInput)="filterItems($event)"
[showCancelButton]="true"
cancelButtonText="Cancel"></ion-searchbar>
</ion-toolbar>
</ion-header>
Referring to the official documentation:
There are many variables you can override with Ionic. Any of the following variables can be overridden from your src/theme/variables.scss file, just add a new value to the file...
I want to change the background of the input in the search bar component. I found that I should override this variable:
/// #prop - Background of the searchbar input inside of a toolbar
$searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default;
declared in: MyProject/node_modules/ionic-angular/components/searchbar/searchbar.ios.scss:58
So, as per the docs, in my MyProject/src/theme/variables.scss under the comment that suggests putting iOS specific app-wide styles I add:
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$searchbar-ios-toolbar-input-background: #fff;
But the input has the same background defined in the original component's styles. If I add !important after the color in the statement above, everything works.
If I try overriding the same thing but for Android devices (Material Design variables) it works without adding !important.
What am I doing wrong?
Edit: Actually, any variable for that component is not "overwritebale" without !important.
Related
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
I am building a mobile app with ionic and I am trying to change the background image of the div but its not working
Here is the code
<div style="background-image: url(./assets/IMG/set3.jpg);">
......
</div>
I also changed the file path to
style="background-image: url(assets/IMG/set3.jpg);"
style="background-image: url(./assets/IMG/set3.jpg);"
style="background-image: url(/assets/IMG/set3.jpg);"
And I have other div of such, but the background image is not displaying, pls I need your help, I have search online but non of the solutions worked
If your goal is to set background image to the entire page, you could use --background for ion-content. Something like following has worked for me.
ion-content {
--background: url('../../assets/BackgroundImages/splash-screen-background.png');
background-position: center center;
background-size:contain;
background-repeat: no-repeat;
}
here are more details about --background CSS property
Some IDEs (Visual Studio Code) allow you to ctrl click the url (follow link) and ensure that the resource is correctly pointed to. You may want to double check. Even otherwise please check if your assets folder is present at the same level as your page html. If it is not you may have to ensure the correct path, for ex.
background-image: url('../../assets/BackgroundImages/splash-screen-background.png');
Instead of setting the background-image directly with a style tag inside your <div>, give it a class. Then, inside your CSS, define the background-image on that class. That way, the IMG folder should be relative to the CSS file or the app-root. This always gets me with every new project, and it requires some trial and error to get it right.
The ion-back-button does NOT show up to the right of the ion-menu-button. Why is that?
the ion-menu-button and the ion-title show properly and aligned on the same horizantal position.
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<!-- navigation button-->
<ion-menu-button></ion-menu-button>
<!-- optional back button-->
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>
{{ pageTitle | translate}}
</ion-title>
</ion-toolbar>
</ion-header>
In the DOM inspector the CSS display attribute of the ion-back-button is set to none. Why would it set itself to none?
I used
this.navCtrl.navigateForward('/term/' + term);
to navigate to this page, thus I expect the back button to pick this up. Why is navigateForward not adding to the stack, which would make the ion-back-button show?
If there is no page in Stack then
<ion-back-button></ion-back-button>
will not show. If you want to show then You need to be added a specific page in "defaultHref" Attribute.
<ion-back-button defaultHref="logout"></ion-back-button>
you need to be learned from here
https://ionicframework.com/docs/api/back-button
It will not visible if there will be no previous overlay/page to show
So you can set css
ion-back-button {
display: block;
}
Then add click event on element
<ion-back-button (click)="close()">
<ion-icon name="close"></ion-icon>
</ion-back-button>
Add on .ts file
click() {
this.modalCtrl.dismiss();
}
For anyone who has this trouble, and the ion-back-button is still not appearing, check that you have the IonicModule imported in your page's module. It happened to me that I created a component for the ion-header and the ion-back-button was not appearing. It was because my ComponentsModule (the one that declares and exports all my components) had only the CommonsModule imported and not the IonicModule. So always check for the IonicModule in your imports. Otherwise the back button will not appear
Is it root page? if so ion-back-button will not show up.
Try adding the attribute defaultHref. For example: <ion-back-button defaultHref="home"></ion-back-button>. it should show up regardless of having no navigation stack.
So Ionic developers make life complicated, now (Ionic5) the attribute is called default-href and not defaultHref.
But still when clicking not loading to the href.
Workaround. I programmatically decide with the URI path. Drawback, if more detail pages are added to the app, they need to be added (e.g. in an array of back-button-qualifying paths).
<ion-button *ngIf="router.url.includes('/term/')"><ion-icon name="arrow-back"></ion-icon></ion-button>
Added the Router Object to the constructor of this component
constructor(public router: Router) { }
If someone still comes up with why the programmatic navigation does NOT add to the navigation stack - so that the back button would appear on the detail page - I gladly listen.
Just need to add the color in scss file to show up.
ion-back-button{
--color: black;
}
And also don't forget to indicate the href, adding it html file
<ion-buttons slot="start">
<ion-back-button defaultHref="YourRouteHere"></ion-back-button>
</ion-buttons>
Make sure you arrived to that page via a router link that modifies the route history. Otherwise the backbutton wont show because there is no recorded history of a previous route.
My issue was, the link i clicked which takes me to a page forward, had routerDirection="none". So there was no previous route so my back button didn't show.
Changing
<IonRouterLink routerDirection="none" routerLink={`/item/${item.id}`}>...</IonRouterLink>
To
<IonRouterLink routerDirection="forward" routerLink={`/item/${item.id}`}>...
fixed my issue.
In ionic 3 we use app.scss file to write global styles. Ionic 4 is not providing a scss variable to override ion-inputs background as well as many other css properties.
I need to apply a white background to all the ion-inputs. For now, I was able to do it by replicating the following scss code on each component:
:host {
ion-input {
--background: white;
}
}
But I would like to write this code in only one place.
What is the scss file to do it? Do I have to import that file in some place?
You just need to put your css in variable.scss like this
ion-input {
background-color: white;
}
then whenever you are using ion-input it takes background color white.
You can add the custom styles in styles.scss, but remind that if they are intermediate stylesheets, you must add !important to ensure:
ion-input {
--background: var(--ion-color-light) !important;
}
Note: Use var(--ion-color-light) to apply Ionic native light (white) color from variables.scss.
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; }