Search code examples
htmlcssangularionic-frameworkionic4

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

Solution

  • 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