Ionic 2 - Ion input inside card loses outline - css

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.

Related

How to hover ion-card inside ion-list

I have an ion-list which have a button and card inside it, now I want to change the color of the button and card on hover but can't find a way to do it.
Here is my code. Thanks in advance
Html
<div [hidden] = hidden >
<ion-list>
<ion-card >
<button inset = true *ngFor="let item of items" (click)="open($event, item.name)" >
<ion-card>
<h2> <b>{{ item.name }} </b> </h2>
<p> Recommended for</p>
{{item.Description}}
</ion-card>
<br>
<br>
</button>
</ion-card>
</ion-list>
</div>
CSS
ion-card{
display: flex;
flex-direction: column;
width: 100% !important;
margin: 0 !important;
background-color:white;
box-shadow: none;
}
button.item:hover a{
background-color: slategray;
box-shadow: inset 0px 0px 0px 1px red;
}
First of all u can't hover on device but u can attach click events for that u need to use ngStyle in ur components to change color or show if its clicked.
<div [hidden] = hidden >
<ion-list *ngFor="let item of items">
<ion-card >
<ion-button (click)="open($event, item.name)" fill="clear" >
<ion-icon slot="icon-only" [name]="buttonIcon" [ngStyle]="{'color':color1}"></ion-icon>
</ion-button>
<ion-card>
<h2> <b>{{ item.name }} </b> </h2>
<p> Recommended for</p>
{{item.Description}}
</ion-card>
<br>
<br>
</button>
</ion-card>
</ion-list>
</div>
inside ur TS
buttonIcon: string = "md-add";
color1: string = "black";
open(event,item){
this.buttonIcon = "done-all"; // icon change name if u want to change icon too
this.color1 ="red"; // any color u want it to change to
//rest of your code
}
U can use the same ngstyle on ur ion card as well to change color.
U can also use ion-ripple-effect to show some sort of click feedback on cards.

How to use point cursor over ion-icon with button (Ionic 4)

I have an ionic clickable icon (svg) and I placed it in a button. I set the fill to clear because I only want that the point cursor appears. The icon is in a grid on a cell.
Without the button around it looks correctly like this
With the button around it looks like that
The row is defined in this way. I set no-padding because in the next row I have more icons and the padding should be minimal.
<ion-row no-padding>
<ion-col></ion-col>
<ion-col ion-item no-lines no-padding text-center (click)="cmbAButton.open()">
<ion-button icon-only fill="clear" >
<ion-icon class="big" src="/assets/{{aSelectedIcon}}.svg"></ion-icon>
</ion-button>
</ion-col>
<ion-col></ion-col>
</ion-row>
In scss I have
ion-icon {
&.big {
width: 40px;
height: 40px;
}

ion-item / ion-native background color

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

ionic 3 ion-input inside ion-item height issues

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; }

How to get Ionic toggle on the left hand side of the label?

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

Resources