CODEWITHSUNDEEP
htmlcssionic2alignment
Ina Bertolini
Ina Bertolini

Reputation: 335

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

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:

enter image description here

What I want is:

enter image description here

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

Upvotes: 2

Views: 2462

Answers (1)

Daniel Gonzalez Barbosa
Daniel Gonzalez Barbosa

Reputation: 63

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>

Upvotes: 4

Related Questions