CODEWITHSUNDEEP
cssionic2iconic
user3607282
user3607282

Reputation: 2555

ionic - Adding a button inside a input field

I'm trying to add a button inside an <ion-input> but wherever I add it inside the <ion-list> the button does not show on the screen.

What I'm trying to do is to show a button "Forgot" on top of the password field aligned to the right. Refer screen:

enter image description here

This is my HTML,

<ion-content>
  <ion-list class="au-form" inset padding>
        <ion-item>
            <ion-input type="text" placeholder="Username"></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="password" placeholder="Password"></ion-input>
            <button clear>Forgot</button>
        </ion-item>
   </ion-list>
</ion-content>

How do I achieve this layout in Ionic 2?

Upvotes: 10

Views: 37728

Answers (5)

Anand Raja
Anand Raja

Reputation: 3108

Toggling the password visible on and off is simple in ionic 4.

you have to mention the slot value as end (slot="end") to make the icon at end along with item-end property

<ion-item>
   <ion-label position="floating">Password</ion-label>
     <ion-input type="{{showPass ? 'text' : 'password'}}"></ion-input>
     <ion-icon item-end slot="end" name="{{showPass ? 'eye' : 'eye-off'}}" (click)="showPass=!showPass"></ion-icon>
</ion-item>

inside the component.ts file

showPass:boolean = false;

Upvotes: 0

DerBesondereEin
DerBesondereEin

Reputation: 470

For ionic 4 it will look a bit different:

<ion-item>
 <ion-input type="password" placeholder="Password"></ion-input>
 <button clear slot="end">Forgot</button>
</ion-item>

Instead of left and right they introduced start and end values, which make it easier to build interfaces for both left-to-right and right-to-left writing directions

Upvotes: 14

deanwilliammills
deanwilliammills

Reputation: 2787

I have something similar, a disabled input with an enabled icon button next to the input. Here is my HTML:

<ion-item>
    <ion-label floating>My Label</ion-label>
    <ion-input [disabled]="true" type="text" [(ngModel)]="MyModel"></ion-input>
    <button ion-button large clear (click)="doSomething()" item-end>
      <ion-icon name="search"></ion-icon>
    </button>
  </ion-item>

So in you case, this will work:

<ion-item>
    <ion-label>Your Label</ion-label>
    <ion-input type="text" [(ngModel)]="yourModel"></ion-input>
    <button ion-button large (click)="doSomething()" item-end></button>
  </ion-item>

item-left and item-right directional properties are deprecated according to https://ionicframework.com/docs/theming/rtl-support/

Upvotes: 3

user3607282
user3607282

Reputation: 2555

Fixed in the recent Ionic releases. Adding item-right on the button works.

<ion-item>
 <ion-input type="password" placeholder="Password"></ion-input>
 <button clear item-right>Forgot</button>
</ion-item>

Upvotes: 30

Oron Bendavid
Oron Bendavid

Reputation: 1533

try using flex:

 <ion-content>
  <ion-list class="au-form" inset padding>
        <ion-item>
            <ion-input type="text" placeholder="Username"></ion-input>
        </ion-item>
        <ion-item>
           <div style="display:flex">
            <ion-input type="password" placeholder="Password"></ion-input>
            <button clear>Forgot</button>
          </div>
        </ion-item>
   </ion-list>
</ion-content>

Upvotes: 1

Related Questions