Ionic2 input-label fixed on the right of ion-input field

Question

Hi I already tried How to align ion-label to right, but this is not what I need. It is my first project in ionic 2 and java script, so i apologized if it is a stupid question.

I have a ion list:`

<ion-list >

    <ion-item>
        <ion-label floating>Company Name</ion-label>
        <ion-input type="text" value="{{this.navParams.data.tenant.name}}"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label floating>Bot name</ion-label>
        <ion-input type="text" value="{{this.navParams.data.tenant.name}}"></ion-input>
    </ion-item>


    <ion-item>
        <ion-label floating>Bot Url</ion-label>
        <ion-input type="text" value="{{this.navParams.data.tenant.name}}" text-left></ion-input>
        <ion-label>mydomain.com</ion-label>
    </ion-item>
</ion-list>

`

What I got is this:

What I want is:

".myDomain.com" should be a ion-label fixed the user can only change "Audi" to another.

Answer 1

You just need to set and order like the example

.label-right{
    order: 2
}

 <ion-list>
      <ion-item>
        <ion-label floating>Bot Url</ion-label>
        <ion-input type="text" value="{{this.navParams.data.tenant.name}}" text-left></ion-input>
        <ion-label class="label-right">mydomain.com</ion-label>
    </ion-item>
</ion-list>