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; }
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 have a problem with ion-button in ionic v4
If I write in my app
<ion-button>Hi</ion-button>
And run the application, the app show the button with te text in uppercase
I need the buttons to be shown with the text as I wrote it. Please
In ionic-5, in theme/variables.css, you could add the following
ion-button {
text-transform: none;
}
This would apply for the entire app. Also refer this github issue comment.
Try to use text-capitalize, for every first words in UperCase
<span text-capitalize>hi</span>
or text-transform, for normal text
<span style="text-transform:none!important;">Hi Hi</span>
For more examples and other utilities check this doc, you'll like!
You can solve it by adding just inline css as following :
<ion-button style="text-transform:none">Your Text</ion-button>
Try to use mode="ios". Tested on ionic 5 :
<ion-button mode="ios">Your Text</ion-button>
You can add this style in the global.scss
ion-button { text-transform: none; }
I have tested this code and it works well
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.
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.
I want the user to be able to click and drag the scrollbar on the side of the screen while using my ionic app. Is this possible?
Ionic has a built in component called ion-scroll. It does what you have described and more. You can implement it inside your HTML like so.
<ion-scroll
scrollX="true"
scrollY="true">
</ion-scroll>
For me the solution was to add isBrowser variable to the controller which determined if this is mobile (no scroll bar) or desktop (draggable scrollbar).
<ion-content data-ng-class="{ isBrowserView : appCtrl.isBrowser }"
overflow-scroll="{{ appCtrl.isBrowser }}">
...
</ion-content>
And I added the following to me scss file:
.isBrowserView {
overflow-y: auto !important;
}
.isBrowserView .scroll-bar-indicator {
display: none;
}
*If you always want the scrollbar then do not worry about setting the value on a controller. Like so:
<ion-content class="isBrowserView"
overflow-scroll="true">
...
</ion-content>