I'm getting an issue with ion-item background color.
What I want :
Set the background color to transparent.
What I have :
<ion-item class="custom-ion-toggle">
<ion-label>Remember me!</ion-label>
<ion-toggle formControlName="remember" slot="start" color="secondary" mode="ios"></ion-toggle>
</ion-item>
This generate a <div class="item-native"> with a white background.
What I've tried to do :
app.component.scss :
.item-native {
background: transparent !important;
}
So this is what I get :
try this in your css page :
ion-item {
--ion-background-color: transparent !important
}
try this in login.scss
.custom-ion-toggle{
background-color: transparent !important;
}
i have tried it in my app and it's working completely fine.
Use the ion-item CSS custom property supplied by Ionic:
.custom-ion-toggle {
--background-color: transparent;
}
Use this on your css style:
ion-item {
--background: transparent !important;
}
In Ionic 6:
Set color property to item:
<ion-item color="primary">
In global.scss override the color:
ion-item {
--ion-color-primary: transparent;
}
I had the same problem, I just set the property color to "undefined" in the ion-item tag and it works, give it a try.
(Also I set lines to none in ion-list to remove lines at the bottom of each item)
<ion-list lines="none">
<ion-item color="undefined">
<ion-avatar slot="start">
<img [src]="student.photo" />
</ion-avatar>
<ion-label>
<p>{{student.name}}</p>
</ion-label>
</ion-item>
</ion-list>
use ion-list instead of ion-item it will solve the problem
Related
I have a simple toggle and label in a ion-item:
<ion-item>
<ion-toggle checked="true"></ion-toggle>
<ion-label>Aangemeld blijven</ion-label>
</ion-item>
I want to acheve that the toggle is placed on the left hand side of the label, but my result is:
I tried the floating-left and right, but it doesn't help.
Do you have any suggestion?
I think you should use item-start attribute, it works for me and it's probably the most recommanded.
<ion-item>
<ion-toggle item-start checked="true"></ion-toggle>
<ion-label>Aangemeld blijven</ion-label>
</ion-item>
Use these two class to override and show ion-toogle text on right side
.item-toggle .toggle
{
left: 16px !important;
}
.item-toggle .ng-binding
{
margin-left: 98% !important;
}
Sample : https://codepen.io/codeandyou/pen/obvYOG
I'm tring to change the color of the checkmark inside the ion-checkbox. The checkbox has a white background and the the checkmark is white Im tring to get the checkmark to be black not white. This is what I have so far
.checkbox-icon::before {
background-color: white !important;
}
.checkbox-icon::after {
color: black !important;
}
<ion-item ng-repeat="list in modal.item.modifier_lists | orderBy: 'ordinal'"
ng-if="list.modifier_options[0].name">
<div ng-if="list.modifier_options.length === 1"
class="row">
<div class="col">
<ion-checkbox ng-model="list.modifier_options[0].selected"
ng-checked="list.modifier_options[0].selected"
class="button-orange checkbox-stable">
<span class="pull-right">{{list.modifier_options[0].name}}</span>
</ion-checkbox>
</div>
</div>
</ion-item>
Some of the css- properties you can use to change the coloring of the <ion-checkbox> are
--checkmark-color: black;
--background-checked: white;
--border-color: black;
--border-color-checked: black;
You can find more information in the ion-checkbox documentation
I'm pretty sure you actually have to use border-color to adjust the checkmark color
So to clarify here is what you could do:
Inside your <ion-checkbox> add a custom class of your own custom-checkbox and then for that class do whats below:
.custom-checkbox .checkbox-icon:after {
border-color: //whatever you like it to be
}
That will change the color of the check mark when it is checked.
My html looks like the following
<ion-content padding>
<ion-card>
<ion-card-header>
Header
</ion-card-header>
<ion-card-content>
<form (ngSubmit)='someAction()'>
<ion-item>
<ion-label stacked>Some Label</ion-label>
<ion-input name="some-input" type="text" value="some-value"></ion-input>
</ion-item>
</form>
</ion-card-content>
</ion-card>
</ion-content>
The input would usually have a blue bottom outline, which then becomes green when filled in.
However, when used inside a card, the outline only appears when the input is clicked and value is inputted.
Is there a way of having the outline still display even if it is placed within a card?
This is a known issue in ionic
https://github.com/ionic-team/ionic/issues/11640
However, you can fix it by adding this code to your app.scss until this issue is fixed by the team.
.card-md .item-md.item-block:not(:last-child) .item-inner {
border-bottom: 1px solid #dedede;
}
.card-md .item-md.item-block:not(.item-input):not(.item-select):not(.item-radio):not(.item-checkbox) .item-inner {
border: 0;
}
I did that
ion-input {
border-bottom: 0.5px solid map-get($colors, primary);
}
It's simple and show all inputs with line on bottom like it was focused. It's not the result that I would like but it's better than show blank input.
How to remove transparent style from ion-select which is disabled ?
Please help.
<ion-item (click)="goToProducts()">
<ion-label stacked>product</ion-label>
<ion-select [(ngModel)]="product" disabled class="disabled">
<ion-option value="1">Product 01</ion-option>
</ion-select>
</ion-item>
on scss file
.disabled{ ?
}
I add this:
.select-disabled, .item-select-disabled ion-label {
opacity: 1;
}
it works for me
create a class example class="select" then on scss add this?
select { --placeholder-opacity: 100% ; }
In my project I have some tabs and I want to update Badge's style when my value is 0. But I don't know how to change dynamically my tab's style. Moreover I don't know how to change the opacity of my badge in the style.
I want to have this result :
Thank you for your help ! :)
There is my code :
<ion-tabs color="secondary" (ionChange)="changeTabs()">
<ion-tab [root]="tab1" tabTitle="tab1" tabBadge="{{this.session.getToDoCount()}}" tabBadgeStyle="notif"></ion-tab>
<ion-tab [root]="tab2" tabTitle="tab2" tabBadge="{{this.session.getToComeCount()}}" tabBadgeStyle="notif"></ion-tab>
<ion-tab [root]="tab3" tabTitle="tab3"></ion-tab>
</ion-tabs>
You have to do with ngClass directive if your badge value is zero apply a custom style.
HTML:
<ion-item class="messages">
<ion-icon name="logo-twitter" item-left></ion-icon>
Followers
<ion-badge class="message" item-right [ngClass]="{'me': badgeValue === 0}">260k</ion-badge>
</ion-item>
styles:
.messages {
.message {
background: #387ef5;
color: #fff;
}
.message.me {
background: #fff;
}
}