How to center buttons in ion-footer-bar?

ionic-v1
1

There is a method for center buttons in the footer bar?

4 Likes
2

I also wonder about this. I even want to add button icon as possible.

3

A quick and easy way to position items on the footer would be to use grid columns - http://ionicframework.com/docs/components/#grid-even

4

I think the best way to arrange the buttons on the footer is using a grid, but it will not look so fine. I just made a css snippet and now it looks good:

CSS:

.bar-footer.footer-buttons{
     padding: 0px;
}
.bar-footer.footer-buttons .row{
     padding: 0px;
}
.bar-footer.footer-buttons .row .col{
     text-align: center;
}

HTML:

<div class="bar bar-footer bar-light footer-buttons">
    <div class="row">
        <div class="col">
            <button class="button button-balanced button-clear icon-left ion-ios-checkmark-empty" ng-click="save()">Save</button>	
        </div>
        <div class="col">
            <button class="button button-balanced button-clear icon-left ion-ios-close-empty" ng-click="add()">Cancel</button>	
        </div>
    </div>
</div>
5

Hey,

I know this post is pretty old but I am just starting with ionic and came across the same issue.

One solution I found was simply taken from another issue: Vertically center a button

HTML:

        <ion-footer-bar class="bar-stable button-footer-bar">
          <a class="button button-stable">Filtern</a>
        </ion-footer-bar>

CSS:

.button-footer-bar {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

Can someone say if there are any plattforms where this may not be working?

6

My workaround for this. wrap the <ion-buttons ></ion-buttons> with a div and style it with ‘text-align:center’

<ion-footer>
  <ion-toolbar color="primary">
  <div style="text-align: center;">
    <ion-buttons >
      <button ion-button icon-left (click)="presentActionSheet()">
        <ion-icon name="camera"></ion-icon>Select Image
      </button>
      <button ion-button icon-left (click)="uploadImage()" [disabled]="lastImage === null">
        <ion-icon name="cloud-upload"></ion-icon>Upload
      </button>
    </ion-buttons>
  </div>
    
  </ion-toolbar>
</ion-footer>

something like this. works for me everytime

2 Likes