RC4 - buttons not displaying on left side

Ionic Framework ionic-v3
1

Hi,

I’ve noticed that buttons added to the navbar which are meant to show on the left side will not do so in the browser.

They’ll only show up in the correct location given the “lab” switch ionic serve -l for iPhone, but it’ll still fail for Android & Windows (and on an actual phone, they don’t show up on the correct side - the left side).

Does anyone know how to make left-anchored buttons show up correctly?

Here’s sample code that will fail with the command ionic serve

<ion-header>
  <ion-navbar>
    <ion-title>Buttons In Components</ion-title>
    <ion-buttons start>
      <button ion-button icon-only item-left>
        <ion-icon name='contact'></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
    <button ion-button icon-only>
      <ion-icon name='search'></ion-icon>
    </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Thanks,
Ryan

2

Hello. Instead of using the attributes start and end of ion-buttons, try the attributes left and right and see how it goes.

3

Thanks @danielsousat!

This works just fine:

    <ion-buttons left>
      <button ion-button icon-only>
        <ion-icon name='contact'></ion-icon>
      </button>
    </ion-buttons>

Where did you find documentation for that? Every doc and driftyco repo I’ve searched still shows the “start” and “end” attributes.

4

Hi, glad it worked.

This is actually on the toolbar’s doc: http://ionicframework.com/docs/v2/api/components/toolbar/Toolbar/

The navbar’s doc points to it, but this reference is easy to miss.