I'm trying to style the placeholder of my Ionic 4 application.The HTML looks as follows:
<form>
<ion-grid>
<ion-row class='label'>Name</ion-row>
<ion-row>
<ion-item>
<ion-input type='text' [(ngModel)]='recipe.name' name='name' placeholder='Name'></ion-input>
</ion-item>
</ion-row>
<ion-row class='label'>Weight</ion-row>
<ion-row>
<ion-item>
<ion-input type='number' [(ngModel)]='recipe.weight' name='weight' placeholder='Weight'></ion-input>
<ion-label>kg</ion-label>
</ion-item>
</ion-row>
</ion-grid>
</form>
If tried out Ionic 2.x solutions yet it did not work out.
I've figured out that if you set a color in ion-item it styles the entire text of the input field
ion-item {
ion-input{
color:red;
}
}
when using the pseudo class :placeholder-shown or the pseudo element ::placeholder on ion-input though the styling shows no effect.
What am I doing wrong? Is there even a possibility in Ionic 4 to style input placeholder ?
Edit:
Stackblitz to fork with Ionic 4 and Angular 6
Use this style code:
ion-input{
--placeholder-color: red;
--placeholder-opacity: 1;
}
See here:https://stackblitz.com/edit/angular6-with-ionic4-list-refresh-test-yq3ntj?file=src%2Fapp%2Fapp.component.html
Please try this general styling to see if it has any effect:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
}
:-ms-input-placeholder { /* IE 10+ */
color: red;
}
:-moz-placeholder { /* Firefox 18- */
color: red;
}
Some components, like datetime, use your own html structure.
So I has apply more tags to changed all inputs.
ion-datetime {
--placeholder-color: rgba(211, 211, 211, 0.4);
}
ion-input, ion-textarea, ion-select {
--placeholder-color: rgba(211, 211, 211, 1);
}
I don't understand why I use different alpha values... but it worked!
Related
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
i am building a website and the form has input with label. They seems to have too my height and i am unable to figure out how to reduce it. the code looks like
<ion-grid>
<ion-row>
<ion-col text-right><ion-item no-lines><ion-label class="fa-labels">Name</ion-label><ion-input placeholder="Infrastructure Information" value="Infrastructure Information"></ion-input></ion-item></ion-col>
<ion-col><ion-item no-lines><ion-label class="fa-labels">Close Date</ion-label><ion-input value="7/15/17"></ion-input></ion-item></ion-col>
</ion-row>
<ion-row>
<ion-col text-right><ion-item no-lines><ion-label class="fa-labels">Account</ion-label><ion-input value="Net-World Technologies"></ion-input></ion-item></ion-col>
<ion-col><ion-item no-lines><ion-label class="fa-labels">Status</ion-label><ion-input value="Open"></ion-input></ion-item></ion-col>
</ion-row>
</ion-grid>
applied css
ion-input {
border: 0.5px solid #BCC0C2;
margin: 0px;
padding:0px;
}
doing a padding or margin didnt help to 0px.
Try this:
<ion-input class="ioninput"> <ion-input>
And in CSS:
.ioninput{
input{
height:xx px;
}
}
If I am understanding the docs correctly, you need to style using classes and not by selecting elements themselves. So...
<ion-input class="input" ...></ion-input> and .input { padding: 0; margin: 0; }
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.