I want change the background color. Like this:
$red: red;
ion-router-outlet, ion-header ion-toolbar{
--ion-background-color: $red;
--background: $red;
}
But it's doesn't working.
ion-router-outlet, ion-header ion-toolbar{
--ion-background-color: red;
--background: red;
}
Is it working... what is the problem?
In variables.scss I wrote:
...
--background-white: #F6F6F6;
...
And in the app.scss:
ion-router-outlet, ion-header ion-toolbar{
--ion-background-color: var(--background-white);
--background: var(--background-white);
}
Related
I want to set a border-radius to the img tag inside <ion-img>.
I've tried to add
img { border-radius: 16px}
in .scss component style, in variable.scss and in global.scss but did not work.
Try to add your CSS class to <ion-img>.
HTML - home.page.html
<ion-img [src]="img" class="your-class"></ion-img>
CSS - home.page.scss
.your-class {
border-radius: 16px !important;
overflow: hidden;
}
this seems like such a simple thing to do, but I can't seem to do it. I've tried using CSS in my scss file, like this:
.ag-header-cell-text {
font-size: 8px;
color: red;
background-color: red;
}
or like this:
.ag-header-cell
font-size: 8px;
color: red;
background-color: red;
}
but nothing changes, not the color either. setting the headerheight works but doesn't help me. I just want the font smaller.
I've also tried adding a cellStyle property to the columnDefs, but nothing seems to works, nor can I find a solution. Please help.
Adding !important may work.Or maybe your class names don't correct. Check it by f12 (inspect) and correct.
.ag-header-cell-text {
font-size: 8px !important;
color: red !important;
background-color: red !important;
}
.ag-header-cell
font-size: 8px !important;
color: red !important;
background-color: red !important;
}
I want it to have a standart design on ionic input elements. I have an ion-select element and this element inside select box text align-left but I want select-icon align right. I do on HTML element like that: https://ibb.co/99YXc8B. But I am not doing in the sccs style. I try a lot. Stackblitz link: https://stackblitz.com/edit/ionic-fdqf4z?file=pages%2Fhome%2Fhome.scss
Replace your CSS with this CSS code.it will works.
[inline-icon] {
font-size: 2em !important;
padding-right: 3px !important;
color: #808080ba !important;
}
.try{
color: red;
width:100%;
}
ion-select
{
max-width: 100%;
}
I'm trying to change the color and the size of the letter inside the ion-toolbar but without success, what I've tried so far:
ion-toolbar {
--background: var(--custom-primary); //works
--color: #FFFFFF; //works letters, not icon
ion-buttons {
font-weight: bold; //works
--icon-font-size: 10px !important;
}
ion-back-button {
--icon-font-size: 30px !important;
}
}
You can directly style your toolbar in the template. E.g.:
<ion-toolbar color="green">
...
</ion-toolbar>
Check out these docs https://ionicframework.com/docs/theming/advanced#themes. Theming ionic core components like the ion-toolbar is a little different.
I'm using an ionic refresher to refresh content on a page in my application. However, when I pull up the ion-refresher, background does not get fully set to the color I want.
This is a CSS class I'm applying to the ion-refresher:
ion-refresher {
background-color: #dedede;
}
ion-refresher-content {
background-color: #dedede;
}
And this it what the result looks like:
How do I remove the white gap between the ion refresher and the main content?
On Ionic 4, this CSS worked for me:
ion-refresher-content {
padding-bottom: 200px;
background-color: yellow;
.refresher-pulling {
position: fixed;
top: 50px;
}
}
The padding-bottom: 200px; fills up the space to show the yellow color, but it also introduces a new issue. The refresher arrow disappears! In order to keep the arrow in place and make it function normally, the .refresher-pulling and its corresponding styles are added. This way, now the app background color shows without any white gaps and also the spinner stays in place.
Hope this helps someone.
When you pull up, one div was been created called fixed-content
For remove the gap just add .fixed-content in your .scss
Example:
.fixed-content{
background:#dedede;
}
This is what got it working for me.
ion-refresher-content {
padding-bottom: 100px;
background-color: #dedede;
}
#devner's solution is not working correctly with iPhone X and kind (i.e. devices with safe-area-inset).
Proper solution (Ionic 4):
ion-refresher-content {
position: relative;
padding-bottom: 200px;
background-color: var(--base-background-color-body);
.refresher-pulling, .refresher-refreshing {
position: relative;
top: 30px;
}
}
Appendix: best UX on my opinion can be achieved with next HTML:
<ion-refresher slot="fixed" pullFactor="0.5" (ionRefresh)="onPullToRefresh($event)">
<ion-refresher-content
pullingIcon="refresh"
refreshingSpinner="crescent"
></ion-refresher-content>
</ion-refresher>