align-text in ion-input Ionic 2

Question

I have this html in ionic

<ion-label color="primary" stacked>Email</ion-label>
<ion-input type="email" placeholder="Email Input"></ion-input>

how to make text input align-text in right side

score 13 · Answer 1 · answered Jun 29 '18 at 08:31

13

ionic 3:

<ion-input text-center></ion-input>

answered Jun 29 '18 at 08:31

Hizabr

423
5
6

It really is that easy now it seems like. To right align, `text-right` works as well. Surprised this isn't documented. – Adam Specker Jul 23 '20 at 21:16

score 10 · Accepted Answer · answered Nov 10 '17 at 11:13

Inside of every ion-input there's a input, this input is what you need to style, just do the following:

ion-input {
  input {
    text-align: right;
    /* IF YOU ALSO WANT TO PUSH PLACHEHOLDER TO THE RIGHT USE THE FOLLOWING, IF NOT JUST DELETE THE ::-webkit-input-placeholder*/
    ::-webkit-input-placeholder {
      text-align: right;
    }
  }
}

Hope this helps.

score 0 · Answer 3 · answered Nov 23 '19 at 09:48

<div class="topPedding">
    <ion-item>
      <ion-input type="text" placeholder="Username" text-center></ion-input>
    </ion-item>
    <ion-item>
      <ion-input type="password" placeholder="Password" text-center></ion-input>
    </ion-item>
    <ion-item class="border-none" lines="none">
      <ion-toggle color="primary"></ion-toggle>
      <ion-label>Rem[![enter image description here][1]][1]ember Password</ion-label>
    </ion-item>
    <ion-button color="light" expand="block">Sign In</ion-button>
  </div>

align-text in ion-input Ionic 2

3 Answers3