Navbar second icon overflowed (Android 4.4.1)

Just tested my app on Lenovo Android 4.4.1 and spotted weired behaviour. The second icon is not visible because it’s under the bar. It works fine on Samsungs and HTC (4.1-4.3). Not sure about Samsung 4.4.

Anybody experienced it too? Is it a framework bug?

image

Well, found a bug reporting this (https://github.com/driftyco/ionic/issues/930) but even though it is closed I’m still experiencing the problem in the beta14.

@mhartington Could you please verify the issue? It’s a showstopper for me now on many devices. Thank you very much.

What does the code look like for this?

<ion-view view-title="title">

<ion-nav-buttons side="left">
<button class="button button-icon button-clear" ng-class="{{navBarMenuButton.icon}}" ng-click="navBarMenuButton.onClick()"></button>
</ion-nav-buttons>

<ion-nav-buttons side="right" >                
<button class="button button-icon button-clear" ng-class="'{{icons.refresh}}'"></button>            
<button class="button button-icon button-clear ng-hide" ng-class="'{{icons.more}}'"></button>          
</ion-nav-buttons>        

<ion-content ....

+1

I have the same issue using the code below (in each ion-view). Works in chrome app, but broken in android 4.4.4. The gear is shown in the bar, with space next to it for the help icon, but the help icon is instead shown below the nav-bar floating in the view!

<ion-view title="Trace">
    <ion-nav-buttons side="left">
        <connection-status></connection-status>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-gear-b dark" ng-click="stuff"></button>
        <button class="button button-icon icon ion-help dark" ng-click="stuff"></button>
    </ion-nav-buttons>
    <ion-content class="has-header">
        <!--stuff-->
    </ion-content>
</ion-view>

In case it helps, here is the nav-bar from my top level:

<ion-nav-bar class="bar bar-header bar-balanced" align-title="center">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">
        </ion-nav-back-button>
</ion-nav-bar>

Hi @alfons12 ,

just try this … add an html comment block between button …

<ion-nav-buttons side="right" >                
<button class="button button-icon button-clear" ng-class="'{{icons.refresh}}'"></button>
<!-- -->            
<button class="button button-icon button-clear ng-hide" ng-class="'{{icons.more}}'"></button>          
</ion-nav-buttons>

Hope this can help you…

Thank you sciu. Unfortunatelly, don’t have any Android 4.4 device at the moment, could you @bpf please test it out?

Anyway, let’s hope the ionic team will have a look at it so that we could avoid hacks :wink:

Thanks for the reply @ sciu, but that doesn’t work, and I agree with @alfons12 - this is more likely a bug that needs to be fixed than something that should be hacked…

Your recommendation was unclear, so I tried both:

<button class="button button-icon icon ion-gear-b"></button>
<!-- cb -->
<button class="button button-icon icon ion-help"></button>

and

<button class="button button-icon icon ion-gear-b"><!-- cb --></button>
<button class="button button-icon icon ion-help"><!-- cb --></button>

but neither solved the problem!

@mhartington Mike, is there anything we could do to help the team to investigate the issue?

Can you all try this on any device you have?
I tested this on a nexus running 4.4.4 and wasn’t able to reproduce it.
Funny thing is that another user I talked to had the same issue on 2 devices but not all of his 4.4.4’s.
So this seems to be very device specific.

Not sure whats causing the issue, but using crosswalk solved the issue for him.

Should have Galaxy S4 for testing in a couple of days and will let you know.

However, even if it doesn’t work on 3 or 5 % of the devices it is still a lot, it makes my application unusable and could have a huge impact on the rating :frowning:

Guys, this is a core functionality, shouldn’t it get a high priority? :-/

Thank you very much for the effort.

Can you open an issue for this?

http://ionicframework.com/submit-issue/

Can you try adding this to your css

.buttons-right span{
  display: inherit;
}

Will try it today and also the workaround provided here: https://github.com/driftyco/ionic/issues/930

.platform-android .secondary-buttons button,
.platform-android .primary-buttons button {
                                        float: left;
                                        }

The fix works, had to use

display: inherit !important;

Issue submitted: https://github.com/driftyco/ionic/issues/3082