right alignment for a button in ion-col

Issue

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>

Solution

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

Answered By - robbannn