right alignment for a button in ion-col

Question

I have this grid in my Ionic 2 application. Is there any ionic-specific attribute to make the button shown on the right side of the column (row)?

<ion-grid>
  <ion-row>
    <ion-col>col 1</ion-col>
    <ion-col>col 2</ion-col>
  </ion-row>
  <ion-row>
    <ion-col>
      <button ion-button>My button</button>
    </ion-col>
  </ion-row>
</ion-grid>

score 33 · Accepted Answer · edited Oct 08 '19 at 06:36

33

In your case you can add the attribute float-right like so:

<button ion-button float-right>My button</button>

float-{modifier}
The documentation says you can add the attribute float-{modifier} to position an element inside its container.

{modifier} can be any of the following:
right: The element will float on the right side of its container.
left: The element will float on the left side of its container.
start: The same as float-left if direction is left-to-right and float-right if direction is right-to-left.
end: The same as float-right if direction is left-to-right and float-left if direction is right-to-left.

Example:

<div>
    <button ion-button float-right>My button</button>
</div>

item-{modifier}
To position an element inside an ion-item the documentation says you can use item-{modifier}.

Where {modifier} can be any of the following:
start: Placed to the left of all other elements, outside of the inner item.
end: Placed to the right of all other elements, inside of the inner item, outside of the input wrapper.
content: Placed to the right of any ion-label, inside of the input wrapper.

Example:

<ion-item>
    <button ion-button item-end>My button</button>
</ion-item>

Deprecation
According to the documentation these names are deprecated:

item-right & item-left

The new names are :

item-start & item-end
padding-start & padding-end
margin-start & margin-end
text-start & text-end
start and end for FABs

edited Oct 08 '19 at 06:36

Marco

1,073
9
22

answered Jul 21 '17 at 22:24

robbannn

5,001
1
32
47

It worked fine. I was trying item-right, but it wasn't working. Do you know the difference? – Hamed Jul 21 '17 at 22:48
I dont know if `item-right` is used at all anymore, my guess is that `float-right` is its substitute. Cant find anything about ´item-right´ in the docs. – robbannn Jul 21 '17 at 23:00
`item-right` just works to place elements inside of an `ion-item`. So if you want to place a button inside of an item, or if you want to place the icon of a radio item to the right, you can always use `ion-item`. But it wont work outside of an `ion-item`. Btw thanks @robbannn for the `float-right` attribute, I wasn't aware of it at all :) – sebaferreras Jul 22 '17 at 05:45
1

Youre welcome! I have seen `item-right` in some examples that I have encountered, but I cant find anything about it in the documentation. For horizontal positioning inside an `ion-item` I have found `item-end`, `item-start` and `item-content`. – robbannn Jul 22 '17 at 07:19
Hmm, you're right, I can't find them anymore in the docs. I guess this is part of the new RTL support feature of ionic, where makes way more sense to use _start_ and _end_ instead of _absolute words_ like _left_ and _right_ :/ – sebaferreras Jul 22 '17 at 07:41
@IonicMan, are you developing in Ionic 2 or 3? Things may have changed in Ionic 4 or 5. – robbannn Nov 25 '20 at 21:38
many things have changed in ionic 4 and 5, yeah. im using ionic 5 – IonicMan Nov 26 '20 at 12:13

score 2 · Answer 2 · answered Nov 25 '20 at 13:52

2

The accepted solution didnt work for me. I think it is relevant to ionic v3 and not the current. I solved my problem like this:

page.html:

<div class="test">
    <ion-button>My button</ion-button>
</div>

page.scss:

.test {
    float: right;
}

answered Nov 25 '20 at 13:52

IonicMan

743
1
12
31

score 2 · Answer 3 · answered Mar 19 '22 at 18:48

2

I'm using ionic 6.18.2 where this works for me:

<ion-button class="ion-float-right">Button Text</ion-button>

answered Mar 19 '22 at 18:48

Michael Staples

537
7
13

right alignment for a button in ion-col

3 Answers3