Ionic Navbar buttons not positioning correctly

Ionic Framework ionic-v3
1

I want to place my share button to the right of an ion-navbar. However, following the docs doesn’t seem to be helping.

It keeps giving me this result:

Navbar is positioned incorrectly.
navbar.png709×114

Here’s the code:

<ion-header>
  <ion-navbar>
    <button ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    
    <ion-title>Test Podcast</ion-title>

    <ion-buttons right>
      <button ion-button icon-only clear (click)="presentPopover($event)">
        <ion-icon name="share"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

I also tried changing <ion-buttons right> to <ion-buttons end> and it gave me the same result. Lots of other articles regarding this all around, but none of them are helping me.

2

What is you ionic info output?
As you figured out yourself stuff changed with the positioning of elements in the last few versions.

3 
$ ionic info

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 6.5.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.1.2
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.11.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 3.10.10

BTW, removing this seems to solve my problem:

<button ion-button icon-only menuToggle>
  <ion-icon name="menu"></ion-icon>
</button>

But, yeah. I do have to find a workaround now…

4

http://ionicframework.com/docs/components/#buttons-in-components

I would use start and end as it says in the docs and wrap both <button> in an <ion-buttons> component.