Header-bar and sub header

ionic-v1
1

I have a side-menu controller that encompasses the entire contents of my app.
Inside I have header-bar, however under that header-bar I want to have a sub-header.

This is my code:

<side-menus>
    <!-- Center content-->
    <pane side-menu-content nav-router>
        <!-- Define the header bar that will display todays date-->
        <header-bar 
            title="headerTitle" left-buttons="leftButtons"
            right-buttons="rightButtons" type="bar-stable"
            aligh-title="center"
            ng-controller="headerController"></header-bar>

        <!-- Subheader will display the control to select when we want to leave-->
        <div class="bar bar-subheader">
            <button class='button button-clear ion-ios7-arrow-left'></button>
            <h2 class="title">sub header</h2>
            <button class='button button-clear ion-ios7-arrow-right'></button>
        </div>

        <!--Define where the content will be shown -->
        <content has-header="true" ng-controller="contentController" on-refresh="onRefresh()" has-bouncing="true" padded="true">
            <!-- for pull to refresh-->
            <refresher></refresher>
            <!-- main content view-->
            <ng-view></ng-view>
        </content>
    </pane>

    <!-- left menu-->
    <side-menu side="left">
    </side-menu>
</side-menus>

The issue this causes, is that the sub header overlaps the contents of the <ng-view> tag, forcing me to put a margin-top. However this is not an optimal solution, and it would be better if the sub header pushed the contents down instead of overlapping it.

Am I doing something wrong? Thanks in advance!

2

Content has a few option including a has-subheader=“true” option, which should resolve this. Be sure to include along with the has-header as well

3

worked like a charm! thanks :smile:
perhaps adding it as an attribute to the content documentation would help others in the future

4

Yeah it would be nice, the only reason I know of it was because it went digging in the css and saw a has-subheader class. You could always make a pull request on github to add it…

5

I just added a pull request for this. It will look like :

6

Two things I would change, mention that you must have the “has-header” option set to true in order for sub-header to work. Also, change padded to padding. Padded doesn’t work but padding does.

7

Good points. I never realized the docs were all wrong about padded. I’ll put together another pull request.

8

Two fixes for this :


9

Awesome! glad to see you guys are on top of that.
@Calendee I would also like to mention I found a broken link.,
on the page: http://ionicframework.com/docs/angularjs/views/header/
In the first paragraph: " Nav Router Controller" link is broken

10

That should just link to the Views and Navigation section. I believe its a relic to the old Ng-router before the switch to UI-router

11

Thanks @mlovekovsky I sent in a pull request for that.

12

Trying to add a bar-header with list underneath in a side menu, but the bar-header covers the first item. Any ideas?

<!--Right Notification Menu-->
<ion-side-menu side="right">
    <header class="bar bar-header bar-stable">
        <h1 class="title">Notifications</h1>
    </header>
    <ion-content has-header="true">
        <ion-list>
            <ion-item>
                Message 1
            </ion-item>
            <ion-item>
                Message 2
            </ion-item>
            <ion-item>
                Message 3
            </ion-item>
        </ion-list>
    </ion-content>
</ion-side-menu>

You can see Message 1 is hidden here:
https://www.evernote.com/shard/s213/sh/da7ad52e-24c6-4c0c-9268-2d3e2fbf67b2/96618c8efee3d574a3e6a42f176d4b6c

13

Assuming you are using Beta 1 here. If so, replace that <header> with an <ion-header-bar>.

http://ionicframework.com/docs/api/directive/ionHeaderBar/

1 Like
14

That did fix the list display issue, thanks! However, I have a left and right side menu (left for navigation, right for notifications). Adding this to the right side menu, now adds a header space to the left navigation that I don’t want :-(.

https://www.evernote.com/shard/s213/sh/2cad0114-86a4-451e-bfcc-48c7e37797e6/e3331f3fde2cd823a354ddddf3c037ce

<!--Left Menu-->
<ion-side-menu side="left">
    <ion-content>
        <ion-list>
            <div ng-show="orgs">
                <ion-item nav-clear menu-close href="#/app/home">
                    Home
                </ion-item>...
15

That link doesn’t seem to work. There is a bug right now with headers messing up other views. That will be fixed pretty soon I’m sure.

16

So in beta1 we should use now ion-header-bar for both headers and sub headers? that was the only way i could get the padding for the list below work correctly.

17

Correct @michelhabib, so the markup should look like this

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Header</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>

<ion-header-bar align-title="left" class="bar-subheader bar-positive">
  <h1 class="title">Sub Header!</h1>
</ion-header-bar>
2 Likes
18

Hi,

I’m using the tabs example app as starter. And I was struggeling to get my header showing.
Just using the starter app and included a header above the navbar.
The nav-bar was displayed on top of it. But after reading this topic and adding bar-subheader class to the ion-nav-bar and has-header and has-subheader to the ion-content everything is displaying correctly.
Except :slight_smile: the tab names are not beeing displayed in the navbar anymore.
Am I missing something?

19

Ion-nav-bar isn’t meant to be a subheader. You would want to use an ion-header-bar instead

20

hmm kinda feared that,
@mhartington
So if I want to display something above everything else including the nav bar and at all time. I can use a header and put the nav-bar in the ion-view? Or is there another way or another element I can use?
The app is used to start and stop processes and I want to show which proces is running at all time.