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; }
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'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!
You can see that there is a tiny scroll bar as shown below.Can you tell me how to remove that? This is Ionic 3 app. I have tried many ways.But no luck yet.
Please see how bad it is on the device :(
This on the browser:
.sass
.height-70 {
height: 70px;
overflow: hidden;
}
.html
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col class="height-70" col-12>
<ion-content>
<button ion-button icon-left full (click)="loginWithLinkedin()" class="background-color-linkedin"><ion-icon name="logo-linkedin" class="margin-top-minus-4"></ion-icon><span>Continue with Linkedin</span></button>
</ion-content>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Chrome css(run time): below padding:16px is the problem.But how can I remove it? Because I need padding too.Any workaround?
.scroll-content {
overflow-y: hidden;
}
If you use ion-content inside ion-col it will add some properties from scroll-content. Replace ion-content with div and manually add all the css properties you want to your div.
Try like this file app.scss under /src/app/
[scrollbar-y-auto] .scroll-content {
overflow-y: false !important;
}
and
Your code :
<ion-content scrollbar-y-auto>
Not tested Check and let me know
Try out the following,
<ion-content overflow-scroll="false">
1.bounce,
<ion-content no-bounce></ion-content>
2.
.content > .scroll-content::before {
bottom: 0;
}
.content > .scroll-content::after {
top: 0;
}
3.
.scroll-content {
overflow-y: auto !important;
}
4.
<ion-content>
<div ion-fixed>
</div>
</ion-content>
What I have experienced is sometimes you see scrollbar in browser but not on device. I would suggest to you to verify the same in device or try chrome device emulator in dev tools by pressing Ctrl+Shift+M.
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.