Bar header align buttons group problem

ionic-v1
1

I have two issues with bar header

  1. I have following header bar configuration:

    Contacts

As you can see for left side two buttons stay one under another.

In chrome it works well (with the same resolution).

  1. The second issue is that when I use ng-show / ng-hide right button seems like disabled (see image).

In chrome it works well (with the same resolution).

<div class="bar bar-header bar-stable" ng-show="showGroups">
     <button class="button button-icon ion-navicon" ></button>
      <div class="h1 title">Groups</div>
      <button class="button button-icon ion-plus-circled" ></button>
  </div>

<div class="bar bar-header bar-stable" ng-show="showContacts">
    <div class="buttons">
     <button class="button button-icon ion-navicon"  ></button>
     <button class="button button-icon ion-ios7-arrow-back"  ></button>
    </div> 
    <div class="h1 title" >Contacts</div>
     <button class="button button-icon ion-ios7-arrow-forward"></button>
  </div>

Tested on Nexus 4.

version 0.9.25

2

I’d ask you to see what it looks like on 0.9.26. Unfortunately, it had a lot of bugs that might make it unsuitable for your use. But please try 0.9.26 just so we know if it fixed this issue.

Upgrading to the nightlies could cause some major pain too (https://github.com/driftyco/ionic/pull/788).

3

For 0.9.26 - the same thing.

At least for new version directive ionHeaderBar works well.

<ion-header-bar 
    class="bar-stable"
    left-buttons="leftContactsButtons" 
    right-buttons="rightContactsButtons" 
    title="'Contacts'" 
    ng-show="showContacts"
    ></ion-header-bar>

Thanks,