Right align a button inside an ion-input

Ionic Framework ionic-v3
1

I’m trying to place a button on the right of an ion-input like on the Input 2 in the figure below.

--------------------------------
Input 1 Placeholder
--------------------------------
Input 2 Placeholder [Button]
-------------------------------

But when I place the html for the button inside the ion-item containing the ion-input, it disappears. Placing the button outside the ion-item works.

Why is placing a button with an ion-input restricted?

This is my HTML that doesn’t work,

<ion-list inset padding>
        <ion-item>
            <ion-input type="text" placeholder="Input 1"></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="text" placeholder="Input 2"></ion-input>
            <button clear>Forgot</button>
        </ion-item>
</ion-list>

The HTML that does work with some CSS to help place the button,

<ion-list inset padding>
 <ion-item>
  <ion-input type="text" placeholder="Input 1"></ion-input>
 </ion-item>
 <ion-item>
  <ion-input type="text" placeholder="Input 2"></ion-input>
 </ion-item>
 <button clear class="positioning">Forgot</button>
</ion-list>
3 Likes
2

It works when you add item-right to the button.

<button item-right>Hello</button>

14 Likes
3

Thanks, this saved me some hours of finding solution.

1 Like