Right align a button inside an ion-input

@maggie001 wrote:

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>

Posts: 2

Participants: 1

Read full topic