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% ; }
Related
I want to change ion-menu background different for every page but it's not working:
app.component.html:
<ion-split-pane contentId="main-content">
<ion-menu contentId="main-content" type="overlay">
<ion-content class="app-content" part="placeholder">
<ion-list id="inbox-list">
<ion-list-header lines="full">
<ion-avatar >
<ion-img [src]="'./assets/logo.png'"></ion-img>
</ion-avatar>
Pyramid to True Love
</ion-list-header>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
<ion-item (click)="selectedIndex = i" routerDirection="forword" [routerLink]="[p.url]" lines="none" detail="false" >
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-app>
app.component.scss(Working):
ion-menu ion-content{
--background: #59d36d;
}
any.page.scss(Not working):
ion-menu ion-content{
--background: #59d36d;
}
Is it possible or not?
You can use like this,
Ref : Sidemenu background-color in Ionic-v4
ion-menu {
--ion-background-color: var(--ion-color-primary);
--ion-text-color: var(--ion-color-primary-contrast);
}
In my Ionic 5 app, I am displaying a text-area with a floating label like so:
Then when the user clicks on the <ion-text-area>, it appears like this:
Can someone please tell me how I can initially display the floating label nicely inside the text-area?
The label should be within the radius of the text-area when the page loads up.
Here is my current HTML & CSS:
<ion-item lines="none">
<ion-label position="floating">
Please describe your issue to {{ mechanicToContact.name }} here
</ion-label>
<ion-textarea
style="border-radius:30px;
background: #6E73AA;
padding: 5px";
color="primary"
rows="6"
cols="20"
required
minlength="15">
</ion-textarea>
</ion-item>
Just place your ion-label in "front" of your ion-textarea using z-index css attribute.
I suggest you do something like this to achieve relatively what you are looking for.
component.html
<ion-item lines="none">
<ion-label position="floating" class="position-label-inside">
Please describe your issue to {{ mechanicToContact.name }} here
</ion-label>
<ion-textarea
style="border-radius:30px;
background: #6E73AA;
padding: 5px;"
color="primary"
rows="6"
cols="20"
required
minlength="15">
</ion-textarea>
</ion-item>
component.scss
#keyframes slide-out {
from {padding-left: 15px}
to {padding-left: 0}
}
.position-label-inside {
padding-left: 15px;
z-index: 1;
}
ion-item.item-has-focus {
.position-label-inside {
animation-name: slide-out;
animation-duration: 1s;
padding-left: 0!important;
}
}
ion-textarea {
z-index: 0;
}
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
im having troubles trying to customize the sidemenu which ionic generates automatically.
The sidemenu is located at "app.component.html" and it looks like it follows:
<ion-app>
<ion-menu contentId="content1" side="start" >
<ion-header >
<ion-toolbar >
<ion-avatar>
<img [src]="image">
</ion-avatar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="content1" main ></ion-router-outlet>
</ion-app>
i've tried to use the attribute "style:background-color:#000000" etc to change the style and it works if i put it on every element , but i would like to know if there is some easier and efficient way to customize the sidemenu.
Thank you team!
The first thing you need to know is in ionic '<ion-content>', '<ion-list>' is directives. You can manipulate these directive's template design using css.
for Eg.
In HTML-
<div class="side-nav-menu"> <!--wrap side menu in div tag and give class to it-->
<ion-content >
<ion-list >
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages" >
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]" (click)="dembow(p)" >
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</div>
In Your Application's Global css file which is app.scss
.side-nav-menu{
//add style if you want any...for eg border, shadow.etc
}
.side-nav-menu .ion-item{
//style for ion-item
}
NOTE:- Remember the directives(attributes) name is also the class name of the same directive. for eg. if the directive name is ion-item and you want to add custom css to this directive than you have to add css using .ion-item class in global scss file
<ion-content class="abc">
</ion-content>
use content class to change background this way
.abc {
--background: var(--ion-background-color,linear-gradient(to left,#E67D22, #1C4577)) !important;
}
or use only color instead of gradient
.abc {
--background: var(--ion-background-color,red) !important;
}
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;
}
}