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

Created on 18 Feb 2016 · 3Comments · Source: ionic-team/ionic-framework

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

Browser & Operating System: iOS / Android / Chrome

Chrome (in development)

Source

alexbainbridge

Most helpful comment

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:

screen shot 2016-02-18 at 5 43 48 pm

brandyscarney on 18 Feb 2016

👍3

All 3 comments

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:

screen shot 2016-02-18 at 5 43 48 pm

brandyscarney on 18 Feb 2016

👍3

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!

alexbainbridge on 18 Feb 2016

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!

brandyscarney on 23 Jun 2016

Was this page helpful?

0 / 5 - 0 ratings