Ionic 2 Button will not right align button

Question

I'm looking for a way to pull my buttons to the right side of the page using Ionic2. I have a form component with edit and save button's that I would like to pull to the right:

<div>
  <button ion-button (click)="toggleEdit()">
    <ion-icon name="create"></ion-icon>
  </button>
</div>
<ion-list>
  <ion-card-content>
    <ng-content>
    </ng-content>
  </ion-card-content>
  <div class="row center">
    <div class="col text-right">
      <button ion-button color="secondary" icon-end (click)="save()">
        <ion-icon name="save"></ion-icon>Save
      </button>
      <!--<a style="min-width: 50%;border-radius: 0px;" class="button button-dark icon-left ion-close">Cancel</a>
      <a style="min-width: 50%;border-radius: 0px;" class="button button-balanced icon-left ion-checkmark">Save</a>-->
    </div>
  </div>
</ion-list>

which generates a form that looks like this:

As you can see the save button does not pull to the right, I tried using text-right, but maybe that only works for ionic 1? Also tried to use the icon-end directive to pull it to the right but that doesn't seem to be working I guess it only works when there is another button.

Can anyone the proper Ionic way to align the save button to the right?

Answer 1

Please take a look at this working plunker . You could use an ion-item and add the item-right attribute to the button:

  <ion-card>
    <ion-item padding>
      <button default ion-button item-right>Button</button>
    </ion-item>
    <ion-card-header>
      Header
    </ion-card-header>
    <ion-card-content>
      The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
    </ion-card-content>
    <ion-item padding>
      <button default ion-button item-right>Button</button>
    </ion-item>
  </ion-card>

You can use the padding attribute (or padding-left , padding-right , padding-bottom , padding-top ,...) to align it with the rest of the content.

That's one of the most ionic ways that I can think of...

Another option would be to just use css like this:

  <ion-card>
      ...
    <div style="width: 100%; padding: 26px; text-align:right;">
      <button ion-button>Button</button>
    </div>
  </ion-card>