Ionic buttons

Ionic Framework ionic-v3
1

How to put two buttons on the corner of the page bottom-right and bottom-left?
Someone can help me to answer this question.
Thanks

2

Use Footer/Toolbar in HTML and align them left and right in HTML in the end you can style them in CSS.

As example like this:

HTML:
(do this below your ion-content so it remains always below!)
[if you want to style them add a class.]

<ion-footer no-border>
  <ion-toolbar position="bottom" class="fancyButton_Toolbar">
    <ion-button class="fancyButton" style="position: absolute; right: 0;">I am a Button RIGHT</ion-button>
    <ion-button class="fancyButton" style="position: absolute; left: 0;">I am a Button LEFT</ion-button>
  </ion-toolbar>
</ion-footer>

CSS

.fancyButton_Toolbar{
  text-align: center;
}
.fancyButton_Toolbar .fancyButton{
  background-color: green;
}

You can also put this -> style="position: absolute; left: 0;" in your CSS but since in this example I want both buttons the same settings just a different position its more efficient to code it into HTML since you would have to make a complete new class in CSS just for one position switch.

Hope this helps you out, have fun coding! :four_leaf_clover::blush:

1 Like
3

@cherry…
Thanks for your help!

1 Like
4

You don’t have to add css for the placement of the buttons.

Pls check this example: https://ionicframework.com/docs/api/components/toolbar/Toolbar/
Example source: https://github.com/ionic-team/ionic/blob/v3/demos/src/toolbar/pages/page-one/page-one.html#L17
Note the <ion-buttons start> and <ion-buttons end>

1 Like