Inset Inputs - Ionic

Ionic Framework ionic-v3
1

Heya, does anyone know how I can put a button inline with an input in Ionic2?

Exactly like this on Ionic1 - http://ionicframework.com/docs/components/#item-input-inset

I feel like it is supposed to be obvious. Here is my code attempts so far:

<ion-navbar *navbar>
    <ion-title>Page</ion-title>
</ion-navbar>

<ion-content>
    <ion-list>

        <!--Attempt 1-->
        <ion-item inset>
            <ion-label>
                <ion-input placeholder="Enter Text" type="text"></ion-input>
            </ion-label>
            <button>
                <ion-icon name="md-more"></ion-icon>
            </button>
        </ion-item>

        <!--Attempt 2-->
        <ion-item>
            <ion-input placeholder="Enter Text" type="text"></ion-input>
            <button>
                <ion-icon name="md-more"></ion-icon>
            </button>
        </ion-item>

        <!--Attempt 3-->
        <ion-item>
            <ion-input placeholder="Enter Text" type="text"></ion-input>
        </ion-item>
        <button>
            <ion-icon name="md-more"></ion-icon>
        </button>

    </ion-list>
    
</ion-content>

As you can see below none of these work :frowning:
image

1 Like
2

Did you find a solution?

3 
<ion-list>
    <!--Attempt 3-->
    <ion-item>
        <ion-input placeholder="Enter Text" type="text"></ion-input>
        <button ion-button icon-only item-right>
               <ion-icon name="md-more" ></ion-icon>
        </button>
    </ion-item>
</ion-list>
1 Like
4

Though this is good, it doesn’t replicate the example from Ionic 1. In my app, the line from the ion-item encompasses the button. In the example, the button and line from ion-item looks separated.

5
Post