CODEWITHSUNDEEP
htmlcssangularionic-frameworkionic4
DreadedHippy
DreadedHippy

Reputation: 96

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

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:

code output

Upvotes: 1

Views: 7322

Answers (2)

pegaltier
pegaltier

Reputation: 559

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

Upvotes: 4

elnezah
elnezah

Reputation: 460

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.

Upvotes: 1

Related Questions