Is it possible to make a button-bar below the tabs on Android?

ionic-v1
1

Hi,

Simply, on iOS, I have an header and a subheader defined like this:

<ion-view title="{{title}}">
    <ion-header-bar class="bar-subheader">
        <div class="button-bar">
            <a class="button" ng-click="something()">DoSomething</a>  <!-- one button to simplify -->
        </div>
    </ion-header-bar>
    <ion-content class="has-subheader">
      //some text
    </ion-content>
</ion-view>

On iOS, this well works, since the tabs displayed at the bottom.
I have the header, and just below the buttons (button-bar).

However, on Android, since tabs are placed on the top, it overlaps completely my subheader…, hiding it.

How to display a button-bar, outside of the ion-content, and still just below the tabs on Android?

The objective of this subheader is to cut a list between “Actual items” and “Past items”. (two buttons refreshing the list).

I’m using Beta 14.

Thanks

2

I managed to do the trick but…ugly:

What I did is to add a margin whose size is the size of my tabs like this:

<ion-header-bar class="bar-subheader" style="margin-top:50px">

Isn’t there a built-in class that would replace this style? Like has-tabs-on-top for instance ?

Thanks

3

Had the same problem. Made it a bit more generic, by making a bar-subheader subclass for android devices, as I support iOS and Android:

.bar-subheader.android {
    margin-top: 42px;
}

In the controller I ask for the current platform:

$scope.platform = ionic.Platform.platform();

and add the android helper class, if it is necessary:

<ion-header-bar class="bar bar-subheader" ng-class="::{'android': platform === 'android'}">

Not the best solution either, but a bit more flexible for multi platform support. Also hope it’s supported out of the box in the next release :wink:

4

I’m pretty sure that the bar was being displayed on bottom, just like iOS one. Today discovered this change and even if i try to move the bar, it’s always displayed on top. Someone can help me on this? That’s “ruining” my app-home page