How to align the ion input text with some other element on the side

Question

I am developing a project and I came across a problem where the ion-input text including placeholder text are a little above the text beside it. I need help aligning them.

This is my code.

  <ion-item>
  <h4 item-left> UserName: </h4>
  <ion-input placeholder="UserName" class="ion-padding"></ion-input>
  </ion-item>

  <ion-item>
  <h4 item-left> Profile picture: </h4>
  <ion-input placeholder="Profile picture" class="input"></ion-input>
  </ion-item>

  <ion-item>
  <h4> E-mail: </h4>
  <ion-input placeholder= "Email" inputmode="email"type="email" class="input"></ion-input>
  </ion-item>

This is the output:

score 3 · Answer 1 · answered Jan 07 '21 at 11:12

3

The official and recommended way to align elements in Ionic is using the utilities css classes available since ionic3. You will find the documentation here: https://ionicframework.com/docs/layout/css-utilities

for instance if you want to align a ion-input to the right you can simply do:

 <ion-input class="ion-text-right"></ion-input>

Take care that the utilities are enabled in your global.scss file as explained here: https://ionicframework.com/docs/layout/global-stylesheets

If you are using the old version of Ionic (v2) you must use html attributes and not css classes

answered Jan 07 '21 at 11:12

pegaltier

494
4
11

Doesn't work on an input – Creature Sep 03 '22 at 19:00
@Creature you have to apply it to the `ion-item` (or whatever) element your `ion-input` is wrapped in. I just found this out – Grayda Oct 04 '22 at 01:24

score 1 · Accepted Answer · answered May 25 '20 at 08:04

There are many ways to do this, all of them lay in the obscure and mysterious subject of vertical aligning with css. One of the most usual and quick ways to achieve it is using auto vertical margin for the children elements. So do this and your elements will align vertically:

<ion-item>
    <h4 item-left style="margin: auto 0">
          UserName:
    </h4>

    <ion-input placeholder="UserName" class="ion-padding" style="margin: auto 0"> 
    </ion-input>
</ion-item>

More info: https://css-tricks.com/centering-css-complete-guide/

Anyway I would recommend you to switch to display: flex, as usually quickly satisfies all your needs when writing a mobile app UI. In this case, h4 brings problems, use div instead. Like this:

<ion-item style="display: flex; align-items: center">
        <div item-left> UserName: </div>
        <ion-input placeholder="UserName" class="ion-padding"></ion-input>
</ion-item>

Take a look here for an overview on display: flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

If it helped you, help me back with an upvote.

How to align the ion input text with some other element on the side

2 Answers2