Multiple buttons side by side in the header

ionic-v1
1

Is there a way to have multiple buttons side by side in the header? I’m looking to do something similar to what Instagram does in their mobile app with two buttons side by side on the right side of the header. I’m currently just using the Ionic CSS at this point. Any information would be appreciated. Thanks!

2

Like this :

$scope.rightButtons = [
  {
    type: 'button-icon icon ion-gear-a',
    tap: function(e) {
      $scope.fsc.showSelectIconForm = true;
      $scope.modal.show();
    }
  },
  {
    type: 'button-icon icon ion-help',
    tap: function(e) {
      console.log('How may I serve you, master?')
    }
  }
];
3

Thank you for the response. Unfortunately I’m not using Ionic’s angular features. Is there any way you can post the markup that is generated? When I was trying to implement, my 2 buttons were overlaying one another. Appreciate the help!

4

I pulled out all of the Angular stuff. Here’s the generated code:

<div class="buttons">

	<button class="button no-animation button-icon icon ion-gear-a" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
	</button>

	<button class="button no-animation button-icon icon ion-help" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
	</button>

</div>
3 Likes
5

That worked! Thanks for the help.