I use ionic 3 and trying to change background-color ion-select.
html file :
<ion-select [class.disabledField]="disabledVar" disabled="{{disabledVar}}" [(ngModel)]="dataModel">
<ion-option *ngFor="let item of lists" value="{{item.id_str}}">{{item.text}}</ion-option>
</ion-select>
scss file:
.disabledField {
background-color:#d7d7d7;
}
The background-color can't change. but somehow this code no issue with ion-input and ion-datetime. this problem only with ion-select.
I really appreciate if someone can help me.
Thank you.
Problem solve
.item-select-disabled ion-label,ion-datetime {
opacity: 100;
color:#000;
font-size: $font-size-field;
}
.disabledField {
opacity: 100;
background-color:#d7d7d7;
}
.select-disabled {
opacity: 100;
background-color:#d7d7d7 !important;
/*you can optionally add !important*/
}
<ion-select [class.disabledField]="disabledVar" disabled="{{disabledVar}}" [(ngModel)]="dataModel">
<ion-option *ngFor="let item of lists" value="{{item.id_str}}">{{item.text}}</ion-option>
</ion-select
Related
This select contains the list of all countries in register form. The point is that the ion-content in the form page is scrollable but select it self is not scrolling.
Here is the code:
<ion-item>
<ion-select interface="action-sheet" class="select" placeholder="Country">
<ion-option ngDefaultControl [value]='country.name' *ngFor="let country of countries">{{country.name}}
</ion-option>
</ion-select>
</ion-item>
Why select scroll is not working?
This is a known issue, you can track at https://github.com/ionic-team/ionic/issues/17311#issuecomment-460829890
Ionic have provided a workaround by setting following css in global.scss
.action-sheet-group {
overflow: auto !important;
}
Hope that helps
I had this problem in ionic 4 using interface=popover. The solution was to make a global css class:
.my-select-scrollable .popover-viewport {
overflow: scroll;
}
then add this attribute to the ion-select
[interfaceOptions]="{cssClass: 'm-select-scrollable'}"
You may be able to do something similar
So my problem is that under my label i have an underline that i want to delete. i added no-lines to my ion-label but it's seems to not working.
Is there a way to delete it ?
<ion-item class="checkbox" >
<ion-label></ion-label>
<ion-checkbox class="checkbox-square" (ionChange)="changeEvent($event)"></ion-checkbox>
</ion-item>
And this is the css
.checkbox{
font-size: 1.03rem;
color: $blue-love;
max-width: 400px;
margin: auto;
}
Add this to your css
.checkbox .item-inner {
border-bottom: none !important;
}
Without touching the CSS: This worked out for me
https://www.codegrepper.com/code-examples/html/how+to+remove+the+underline+from+ion+item
TLDR;
<ion-item lines="none">
<ion-tags...>
</ion-item>
Add custom class inside ion-label element:
<ion-label class="custom-label-style">
Label content
</ion-label>
Then style it with text-decoration property:
.custom-label-style {
text-decoration: none;
};
Well, I want to standardize the width equal to the above, but I'm not getting any way ... I've tried margin's, width and others, but none if you want to change the size of the card. I want to leave default, do you recommend me some command or am I doing wrong? all the css commands I did was in home.scss, thank you all.
Watch the print of my app here
page-home {
.bg{
background: linear-gradient(to bottom, #00A399 0%, #fafafa 400%);
}
.bg-ions{
background:#000;
opacity:0.2;
}
.btn{
background:#000;
opacity:0.2;
color:white;
}
ion-input{
color:#FAFAFA;
}
ion-textarea{
color:#FAFAFA;
}
ion-card{
display: flex;
flex-direction: column;
width: 100%;
}
ion-card-content{
margin-left:-2%;
}
ion-item{
width:50%;
}
.summ{
color:#000;
}
::placeholder {
color: white;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: white;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: white;
}
}
<br>
<ion-header>
<ion-navbar>
<ion-title>
HybridSumm
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="bg">
<ion-item class="bg-ions">
<ion-label class="div-pai" color="primary" stacked>Title</ion-label>
<ion-input placeholder="Ex: The Bio-informatics" style="color:white;"></ion-input>
</ion-item>
<br>
<ion-item class="bg-ions">
<ion-label color="primary" stacked >Text</ion-label>
<ion-textarea placeholder="Place the text that you want to summarize." ngDefaultControl [(ngModel)]="test"></ion-textarea>
</ion-item>
<br>
<button ion-button outline style="background: white">Summarize</button>
<button ion-button>Test</button>
<br><br>
<ion-card>
<ion-card-header>
Card Header
</ion-card-header>
<ion-card-content>
{{test}}
</ion-card-content>
</ion-card>
</ion-content>
Ionic set some properties by default, and the only way to override them, is by giving them the !important rule.
It is maybe not the best practice, but it works, and ionic gives us not very much sass variables to overwrite some things.
It works for me adding this in the following SCSS rules in your code:
ion-card{
display: flex;
flex-direction: column;
width: 100% !important;
margin: 0 !important;
}
I hope it works for you.
I have this ion-item in my Ionic 3 application. It includes an ion-badge and an ion-button. I want them both to be vertically aligned inside the ion-item. I tried the answers in here, but it didn't work. At the end I need to have these ion-badge and ion-button side by side.
<ion-item>
<ion-badge>150</ion-badge>
<button ion-button>My Button</button>
</ion-item>
Add a class to your ion-item.
HTML:
<ion-item class="my-item">
<ion-badge>150</ion-badge>
<button ion-button>My Button</button>
</ion-item>
And add the following CSS-styles to the ion-label child of your ion-item.
SCSS:
.my-item {
ion-label {
display: flex;
flex-direction: row;
align-items: baseline
}
}
Result:
UPDATE:
Code and result with icon added to the button:
HTML:
<ion-item class="my-item">
<ion-badge>150</ion-badge>
<button ion-button icon-end>My Button
<ion-icon name="arrow-down"></ion-icon>
</button>
</ion-item>
SCSS:
.my-item {
ion-label {
display: flex;
flex-direction: row;
align-items: baseline
}
ion-icon {
margin-left: 5px;
}
}
Also i added a CSS-rule for the <ion-icon> to get som space between the text and the icon in the button.
Result:
Add vertical-align to the styling:
<ion-badge style="vertical-align: bottom;">150</ion-badge>
justify-content: center; will be work!!
ion-badge {justify-content: center; }
I'm trying to align text in Html but it doesn't work and I do not know why. I'm using Ionic Framework.
My code is:
<ion-list>
<ion-item>
<b>Name</b> <p align="right"> {{paciente.name}}</p>
</ion-item>
....
</ion-list>
and it looks like this:
but I want all text int the same line, and I do not know how to get that.
See this demo: http://play.ionic.io/app/b477ea2f5623
In ionic items, if you write any text within span with item-note class then it will be aligned to right.This is built in class by ionic, your code will be like this :
<ion-item>
<b>Name</b> <span class="item-note"> {{paciente.name}}</span>
</ion-item>
See more tricks with ionic items provide by built in classes, see this Documentation
Add a css class as
.item {
position: absolute;
right: 0px;
width: 300px;
padding: 10px;
}
The p tag creates a paragraph on a new line, so you need an other element. You could use a span element which is floated right:
Html:
<ion-list>
<ion-item>
<b>Name</b> <span class="right"> {{paciente.name}}</span>
</ion-item>
....
</ion-list>
Css:
.right {
float: right;
}
Apply the ckass to all items you want to be on the right.