How to put two buttons in the footer?

ionic-v1
1

I’m trying to put two buttons in the footer of the app, but I did not succeed, only the first button is the way I need the second does not obey the css. Someone already had this problem, do you know how to solve it?

I’m trying this way: https://codepen.io/anon/pen/GEWBry

2

remove padding: 0 from the footer bar

From:

 <div class="bar" style="position:absolute; bottom:0; padding:0 !important; text-align:center" >

To

 <div class="bar" style="position:absolute; bottom:0; text-align:center" >
3

I would like the buttons to look like this:

4

Oh ok, Its because you are using “bar” and ionic.css has a rule that changes position of the 2nd element from the list.

Either you can override the behaviour or create a div with class=“mybar” and customize it.
I have overriden the ionic css like this

5

Try This


…
…
…

        <ion-footer class="bar-stable">
            <h4>
                <button class="btn btn-default btnbottomleft ion-android-cart" ng-click="addtocart(btnAttrVal)" style="background-color: #06149B;color:white;">&nbsp;&nbsp;{{cartbtnvalue}}</button>
                <button class="btn btn-secondary btnbottomright ion ion-information-circled" ng-click="buynow()" style="background-color:#fdd922;color: #06149B;">&nbsp;&nbsp;{{buynowbtnvalue}}</button>
            </h4>
        </ion-footer>
    </div>
</ion-pane>
6

@LeoFeitosa

<ion-footer>
  <div class="buttonRow">
    <ion-row wrap>
      <ion-col width-50>
        <button ion-button outline (click)="Button1()">Button 1</button>
      </ion-col>
      <ion-col width-50>
        <button ion-button outline (click)="Button2()">Button 2</button>
      </ion-col>
    </ion-row>
  </div>
</ion-footer>

Try this

7

LeoFeitosa

<ion-footer>
 <ion-grid>
   <ion-row>
     <ion-col col-6>
      1 of 2
     </ion-col>
     <ion-col col-6>
      2 of 2
     </ion-col>
   </ion-row>
 </ion-grid>
</ion-footer>
1 Like