Search code examples
htmlcssionic-frameworkalignment

Aligning Right in Ionic

I always seem to have aligning problems with CSS.

There's many different methods of aligning right, but none of the techniques I usually do work.

I don't want to use margin with % value either.

trying to get this checkmark to align right.

enter image description here

.HTML

    <ion-item>
      <span>
        Every Sunday
      </span>
      <ion-icon class="right" name="checkmark"></ion-icon>
    </ion-item>

.CSS

.right{
   float:right;
   text-align: right;
}

EDIT: Found it was Ionic feature preventing other CSS aligning it.

So slot="end" did the trick in the .HTML

Solution

  • You don't need to write css for it. Ionic framework already has solution of this. There exist slot property in Ionic which has start and end value.

    you need to put slot="end" on ion-icon. 

    <ion-item>
    <span>
      Every Sunday
    </span>
    <ion-icon slot="end" class="right" name="checkmark"></ion-icon>
  </ion-item>

    enter image description here Hope it will help.