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:
<!-- Center content-->
<pane side-menu-content nav-router>
<!-- Define the header bar that will display todays date-->
<!-- 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>
<!--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-->
<!-- main content view-->
<!-- left menu-->
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!
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
worked like a charm! thanks
perhaps adding it as an attribute to the content documentation would help others in the future
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…
I just added a pull request for this. It will look like :
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.
Good points. I never realized the docs were all wrong about
padded. I’ll put together another pull request.
Two fixes for this :
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
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
Thanks @mlovekovsky I sent in a pull request for that.
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-->
<header class="bar bar-header bar-stable">
You can see Message 1 is hidden here:
Assuming you are using Beta 1 here. If so, replace that
<header> with an
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 :-(.
<ion-item nav-clear menu-close href="#/app/home">
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.
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.
Correct @michelhabib, so the markup should look like this
<ion-header-bar align-title="left" class="bar-positive">
<button class="button" ng-click="doSomething()">Left Button</button>
<button class="button">Right Button</button>
<ion-header-bar align-title="left" class="bar-subheader bar-positive">
<h1 class="title">Sub Header!</h1>
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 the tab names are not beeing displayed in the navbar anymore.
Am I missing something?
Ion-nav-bar isn’t meant to be a subheader. You would want to use an ion-header-bar instead
hmm kinda feared that,
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.