Correct alignment for the button in the ion column

Question

I have this grid in my Ionic 2 application. Is there any ion-specific attribute so that the button appears 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> 

Answer 1

In your case, you can add the float-right attribute as follows:

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

float- {} modifier
The documentation says that you can add the float-{modifier} attribute to place 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 the container.
start : the same as float-left if the direction is from left to right, and float- from the right if the direction is from right to left.
end : same as float- to the right if the direction is from left to right, and float- to the left if the direction is from right to left.

Example:

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

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

Where {modifier} can be any of the following:
start : placed to the left of all other elements, outside the inner element.
end : is placed to the right of all other elements, inside the internal element, outside the input shell.
content : is placed to the right of any ionic label inside 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

New names:

• item-start & item-end
• padding-start & padding-end
• margin-start & margin-end
• text-start & text-end
• start and end for FAB