Ion-col and button position

Ionic Framework
1

Hey,

I am trying to position a ion-button to the right, but all I am getting is the button is right-ish.

image
image792×572 30.4 KB

I´ve got the following code:

<ion-footer>
            <ion-row >
                <ion-col center text-center >
                    <button item-start (click)="favorite(thumbs.get(item))">
                        <ion-icon *ngIf="!thumbs.get(item).favorite" name="star-outline"></ion-icon>
                        <ion-icon *ngIf="thumbs.get(item).favorite" name="star"></ion-icon>
                    </button>
                </ion-col>

                <ion-col center text-center >
                    <button  (click)="presentPopover($event,thumbs.get(item))">
                        <ion-icon name="ellipsis-vertical"></ion-icon>
                        <div>Add to Story</div>
                    </button>
                </ion-col>

            </ion-row>
        </ion-footer>

Driving me nuts.

2

It should work if you place it in a ion-toolbar in ion-buttons with a slot.

So something like:

<ion-footer>
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-button>
        ...
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

I recomend using rows and cols only if you really want to make something grid like or there’s no other way to do it. Toolbars with ion-buttons are the better solution here I guess :slight_smile:

3

Right!

I was just following the Social Card example. Will give this a shot!