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>
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>
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.
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
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>
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>
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>
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>
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
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