Ionic - add a button to the input field

Question

I am trying to add a button inside <ion-input> , but wherever I add it inside <ion-list> , the button does not appear on the screen.

What I'm trying to do is show the Forget button over the password field aligned to the right. See Screen:

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 to achieve this layout in Ionic 2?

Answer 1

Fixed in recent releases of Ionic. Adding an item to the right of the button works.

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

Answer 2

I have something similar, disabled input with a button with an icon turned on 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 your 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 become obsolete according to https://ionicframework.com/docs/theming/rtl-support/

Answer 3

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> 

Answer 4

For ionic 4, this will look a little 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 ​​that make it easier to create interfaces for directing letters from left to right and from right to left