Ionic-framework: v2 item-right text/number input on form

[alexbainbridge]

Short description of the problem:

Feature request : Ability to right align an input (text / number) on a form so that if it also has a toggle, the form looks better

What behavior are you expecting?

Would like an attribute - e.g. item-right , to work on ion-input

Steps to reproduce:

Have a toggle in a form - appears on the right with label on the left

 <ion-row>
                        <ion-col>
                            <ion-item no-lines>
                                <ion-label secondary>Published</ion-label>
                                <ion-toggle [(ngModel)]="published" toggle></ion-toggle>
                            </ion-item>
                        </ion-col>
</ion-row>

BUT if you do something like this

                    <ion-row>
                        <ion-col>
                            <ion-item no-lines>
                                <ion-label>City</ion-label>
                                <ion-input [(ngModel)]="city" ngControl="city"
                                           maxlength="10"
                                           type="text"></ion-input>
                            </ion-item>
                        </ion-col>
                    </ion-row>

Then the input appears just to the right of the label.

I would like the addition of item-right to move the input be right aligned with right hand edge

                    <ion-row>
                        <ion-col>
                            <ion-item no-lines>
                                <ion-label secondary>City</ion-label>
                                <ion-input item-right [(ngModel)]="city" ngControl="city"
                                           maxlength="10"
                                           type="text"></ion-input>
                            </ion-item>
                        </ion-col>
                    </ion-row>

Ionic Version: 1.x / 2.x

2

Browser & Operating System: iOS / Android / Chrome

Chrome (in development)

[brandyscarney]

So you want the input text to be aligned to the right? Maybe you have a picture of what you're looking for?

You can use the text-right attribute on ion-input to align the text right, but it seems there are some UI issues with padding right when doing this:

[alexbainbridge]

Yeah - that is good (and with padding-right does the necessary padding). Had tried all sorts but not that :)

Bit confusing - toggles go to the right by default, other components or straight text require item-right, and inputs requires text-right and padding

Probably be nice to have this all one consistent way (or one way, and toggles as a special case)

Thank you!

[brandyscarney]

So, item-right is specifically used for content projection. I think making this attribute align text would be confusing since item-right is used to position elements outside of the input-wrapper, but this won't work on an ion-input because it is placed inside of the input-wrapper.

We added some docs on content projection to item: http://ionicframework.com/docs/v2/api/components/item/Item/#item-placement

I think the best solution to this is documentation. Aligning the text should be done using the utility attributes: http://ionicframework.com/docs/v2/theming/css-utilities/

I created an issue to add documentation for this: https://github.com/driftyco/ionic-site/issues/661

Thanks for the issue!