I have a login form that has an email and password input
. What I want to do is a little eye outline icon on the right side of the input. That has a function that will show and hide the password
.
The function is fully working however. I can't get the design that I want to. Something like this . But in my case I am not using a <ion-item>
Here is my code in my html
<ion-row class="p-l-4">
<ion-col col-12 class="col-static">
<ion-input class="input-cover" type="password" formControlName="password" placeholder="Password" required></ion-input>
<!-- Small button icon of eye goes here -->
</ion-col>
</ion-row>
I tried to do anything with it but ended up messing it. Because my input has a border.
Here is the image below of the result.
Here is my code of my input in scss
ion-input {
border: 5px !important;
}
.text-input-ios, .text-input-md {
border-radius: 5px;
border: 1px solid #efefef;
}
.text-input {
margin: 0;
width: calc(100% - 8px);
padding: 13px 8px;
}
Appreciate if someone could help. Thanks in advance.
Try this,
<ion-item>
<ion-icon name='eye' item-right></ion-icon>
<ion-input type="password" formControlName="password" placeholder="Password" required></ion-input>
</ion-item>
If you are using Grid, try this..
<ion-grid>
<ion-row>
<ion-col col-md-10>
<ion-input type="email" id="login_email" name="email" formControlName="email" placeholder="Email" required></ion-input>
</ion-col>
<ion-col col-md-2>
<ion-icon name='eye'></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
For those who land here I tried adding the icon inside a button it worked. My code:
<ion-item id="location">
<ion-input [(ngModel)]="searchLocation" type="text" placeholder="Enter / Select Location" (ionChange)=segmentChanged($event)></ion-input>
<button class="find-me" clear item-right icon-only>
<ion-icon name="pin"></ion-icon>
</button>
</ion-item>
Here is the link Right align a button inside an ion-input
<ion-row class="pl-4"> <ion-col col-12 class="col-static"> <ion-input class="input-cover" type="password" formControlName="password" placeholder="Password" required></ion-input> <ion-icon name='eye' class="eye-icon" item-right></ion-icon> </ion-col> </ion-row>
.col-static{
position:relative;
}
.col-static .eye-icon {
position:absolute;
top:50%;
right:10px;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.