4

I'm trying to align text in Html but it doesn't work and I do not know why. I'm using Ionic Framework.

My code is:

<ion-list>
   <ion-item>
      <b>Name</b> <p align="right"> {{paciente.name}}</p>
   </ion-item>
   ....
</ion-list>

and it looks like this: enter image description here

but I want all text int the same line, and I do not know how to get that.

Mudasser Ajaz
  • 6,197
  • 1
  • 26
  • 29
Nestoraj
  • 722
  • 2
  • 6
  • 19

3 Answers3

8

See this demo: http://play.ionic.io/app/b477ea2f5623
In ionic items, if you write any text within span with item-note class then it will be aligned to right.This is built in class by ionic, your code will be like this :

<ion-item>
  <b>Name</b> <span class="item-note"> {{paciente.name}}</span>
</ion-item>

See more tricks with ionic items provide by built in classes, see this Documentation

Mudasser Ajaz
  • 6,197
  • 1
  • 26
  • 29
3

Add a css class as 

.item {
    position: absolute;
    right: 0px;
    width: 300px;
    padding: 10px;
}
Anil kumar
  • 930
  • 7
  • 18
2

The p tag creates a paragraph on a new line, so you need an other element. You could use a span element which is floated right:

Html:

<ion-list>
  <ion-item>
  <b>Name</b> <span class="right"> {{paciente.name}}</span>
</ion-item>
....
</ion-list>

Css:

.right {
  float: right;
}

Apply the ckass to all items you want to be on the right.

Mathijs Rutgers
  • 785
  • 4
  • 20