Second Header button stacks on Android 4.4?

I am having the strange issue that the second-right header button is placed below the first-right header button but only on a Nexus 5 with Android 4.4.
It will look like this:

On Galaxy Nexus with Android 4.3 it is not happening:

Apparently it is also not a general problem because it works okay on another page with different icons:

My template looks like this:

<ion-header-bar class="bar-light">
  <div class="buttons">
    <button class="button button-clear icon ion-navicon-round" 
  <h1 class="title"></h1>	
  <div class="buttons">
    <button class="button button-clear icon ion-search" 
    <button class="button button-clear icon ion-android-sort" 

Does anyone has the same issue or do you see any reason for this behaviour?

Can you try adding this to your css? See if it messes with anything (transitions and such)

.bar .title + .button:last-child,
        .bar > .button + .button:last-child,
        .bar > .button.pull-right,
        .bar .buttons.pull-right,
        .bar .title + .buttons {
            display: inherit;

Hi Mike,
I’ve added your code snippet without any modifications to my custom CSS and it seems to work without any issues. I tested on Android 4.4 and 4.3 and I do not see any issues. Do you think this will go into the release version as Bugfix? Thanks for your fast support!

Yeah, it was an odd bug in android 4.4, I have a PR in right now to fix this. Should be in by the next beta release

I am seeing the same issue with beta14 on Android 4.4.2 (Galaxy Tab 3 - 10 inch) My fix was to remove the return from between the buttons in the html. I know it sounds odd, but that worked for me. I think there is a style override that sets the position to absolute on the last button in the bar.

1 Like