CODEWITHSUNDEEP
cssionic-framework
user1283776
user1283776

Reputation: 21764

Ionic item with left and right aligned text

I have an ionic item in an ionic list. What is the best way to left align the first text and right align the second text?

  <div class="item">
    <span>first</span>
    <span>second</span>
  </div>

Upvotes: 13

Views: 56048

Answers (8)

Ari Waisberg
Ari Waisberg

Reputation: 1304

I use Ionic 3 and the best anwser I think is to use the ionic tags and attributes:

<ion-list>
  <ion-item>
    <ion-label>
      this to the left
    </ion-label>
    <ion-label text-right>
      this to the right
    </ion-label>
  </ion-item>
</ion-list>

Upvotes: 2

Sudharshan
Sudharshan

Reputation: 3823

With Ionic 2 & above, you can use Element Placement Attributes like float-left or float-right on your HTML elements instead of adding properties like float: left; or float: right; on your scss

https://ionicframework.com/docs/theming/css-utilities/#float-elements

<div class="item">
  <span float-left>first</span>
  <span float-right>second</span>
</div>

Upvotes: 2

Zachary Garcia
Zachary Garcia

Reputation: 51

With Ionic 3 the above answers did not work. With ion-items you can simply leave the left text untouched because it is left-aligned by default. With the text that you want to right-align, simply use the item-end decorator like this:

<ion-item>
     Name <span item-end>Zack</span>
</ion-item>

Upvotes: 5

YATO
YATO

Reputation: 107

Ionic uses CSS Utilities. They provide their own way of aligning text.

<div class="item">
  <span>first</span>
  <span>second</span>
</div>

More about CSS utilities at https://ionicframework.com/docs/theming/css-utilities/#text-alignment

Upvotes: 0

aWebDeveloper
aWebDeveloper

Reputation: 38352

In ionic 2 just use

text-left,text-right

<div class="item">
    <span text-left>first</span>
    <span text-right>second</span>
</div>

Read More :- https://github.com/driftyco/ionic/typography.scss

Upvotes: 8

Vishnu Kumar Soni
Vishnu Kumar Soni

Reputation: 269

you can use css "text-align" property to do that

<div class="item row">
  <span style="text-align:right" class="col col-50">first</span>
  <span style="text-align:left" class="col col-50">second</span>
</div>

Hope this fix your problem

Upvotes: 0

Bobo
Bobo

Reputation: 462

You also use ionic's class and attribute to do that. For exemple

<div class="item row">
   <span align="right" class="col col-50">first</span>
   <span align="left" class="col col-50">second</span>
</div>

Upvotes: 2

N-JOY
N-JOY

Reputation: 7635

This can be done using basic CSS properties. there is nothing specic about ionic here. This can be done using float:left and float:right properties.

Still for your reference, you can go through this link.

Upvotes: 21

Related Questions