CODEWITHSUNDEEP
htmlcssionic-frameworkalignment
win4win
win4win

Reputation: 363

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

Upvotes: 1

Views: 1534

Answers (2)

Sourabh Chopade
Sourabh Chopade

Reputation: 543

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.

Upvotes: 2

m1ck
m1ck

Reputation: 166

i hope i understood your question/intention correctly. try adding the following rules for you ion-item class:

    width: 100%; /* or whatever you want the reference element to be */
    display: inline-block;

this will make the element you are aligning on the right (right) do the same - but the width of the reference element (ion-item) has changed.

Upvotes: 0

Related Questions