Two buttons in ion-nav-buttons side right on Android 4.4

[dovidkopel]

With two buttons in my ion-nav-buttons tag with side="right" the second button is not floated properly, and goes goes into the content.

I have the "exact" same app running on the same phone model but it is working. Not sure why this is happening intermittently.

[ajoslin]

What browser/version does it not work on?

[dovidkopel]

This was happening on a Galaxy Note 3...I have two of them, one Verizon and on Sprint. Thee only reason I mention that is because the Sprint one is running Kit Kat....this happened on the one for Kit Kat.

[niahmiah]

I noticed this too when trying to override the right nav buttons. When I provide a view with 2 buttons, instead of them replacing the 1 button, a new div was created underneath the previous one, causing me to have 3 right buttons in 2 rows, one of which overlapped into the content area.

Using 1.0.0-beta on safari

EDIT: To get around this issue, I had to remove the ion-nav-bar from my ion-pane, and put a specific ion-nav-bar in every view. Not as ideal as how I was updating the nav bar in 0.9.26, but it works for now.

[ajoslin]

Ah, I see the problem! Thanks.

Will fix.

On Fri, Mar 28, 2014 at 2:49 PM, niahmiah notifications@github.com wrote:

I noticed this too when trying to override the right nav buttons. When I
provide a view with 2 buttons, instead of them replacing the 1 button, a
new div was created underneath the previous one, causing me to have 3 right
buttons in 2 rows, one of which overlapped into the content area.

Using 1.0.0-beta on safari

Reply to this email directly or view it on GitHubhttps://github.com//issues/930#issuecomment-38966349
.

[ajoslin]

Fixed! From the commit message:

Uses a <span> now for each set buttons in the navbar, instead of a
<div>. This means that the buttons will align correctly instead of
creating new lines for each set of buttons.

[dovidkopel]

I have this fix and am still having the same result here is the code:

    <ion-view title="Notifications">
        <ion-nav-buttons side="left">
            <button 
                class="button button-icon icon ion-navicon"
                menu-toggle="left">
            </button>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
            <button
                class="button button-icon icon ion-close-circled"
                ng-click="requestClearNotifications()">
            </button>        
            <button
                class="button button-icon icon ion-alert-circled"
                blink
                blink-class="energized"
                blink-interval="750"
                ng-click="notificationClick()"
                ng-show="hasUnreadNotifications()">
            </button>
        </ion-nav-buttons>  
           .....

I still am NOT experiencing this issue on Android 4.3, but on 4.4.2 I am.

[ajoslin]

Hi @kopeltech,

This is actually a different problem, but definitely weird. Only getting this on Android 4.4 too! css, why?

[vincentjames501]

+1. Same issue here on 4.4+

[hai1xu]

+1, have the same problem with 4.4.2. For both left and right ion-nav-button.

[bwalsh]

+1, have this problem. Happens with Android 4.4.4 (19) . iOS 7 (7.0) is fine. Web (google chrome) is fine.

[mrvamsidhar]

+1. I am also having this issue in Android kitkat. I tried simulating this issue for some time. And found that, when there are more than one button inside ion-nav-buttons, the width to adjust the buttons inside ion-nav-buttons is falling short.

Lets say, I have two buttons, one is 54px width and other is 45px. the width for these buttons is is exactly 99px - which was not enough for ion-nav-buttons. That is reason it is wrapping to next line. In debugger console, if you try altering width (say 102px). it works perfectly fine.
Hope this might be issue.

[a-katsarov]

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

That works for me as a temporary solution.

[mhartington]

This should be fixed in the nightly build via eef1d32

[durajski]

Try to remove all the spaces between tags on ion-nav-buttons. Take a look on this topic:
http://forum.ionicframework.com/t/multiple-navbar-icons-on-android-align-vertically-instead-of-horizontally/3258/4

[castrojr913]

The same issue with Samsung devices. I tried on Nexus and Huawei phones and It worked correctly.

[ChrisDraper]

I had the same issue on Sony running Android 4.4 and this solved the issue. Thanks Mike.

[ale1981]

I also had the same issue on 4.4.2, adding comment blocks <!-- --> between the button elements worked for me.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.