Ion-header-bar not working inside ion-view along with ion-content

ionic-v1
1

I followed the tutorial of ionic start myApp tabs,
I want to change the header of each tab to ~balanced class, however it is not working! i dont know why.
so far i have ion-view , and my ion-content is inside the ion-view, anything outside ion-view will not show, i tried put ion-header inside ion-view before ion-content, and set class"has-header" of ion-content, not working! please help.

tab-qa.html:
< ion-view title=“Q&A”>

<ion-header-bar class="bar bar-balanced">
  <h1 class="title">QA</h1>
</ion-header-bar>

<ion-content class="has-header">
<p>test</p>
</ion-content>

< /ion-view>
app.js:
.state(‘tab.qa’, {
url: ‘/qa’,
views: {
‘tab-qa’: {
templateUrl: ‘templates/tab-qa.html’,
controller: ‘QaCtrl’
}
}
})
tabs.html:

< ion-tab title=“Q&A” href="#/tab/qa" icon-on=“ion-ios7-help” icon-off=“ion-ios7-help-outline”>
< ion-nav-view name=“tab-qa”>
< /ion-tab>

controller.js
.controller(‘QaCtrl’, function($scope) {
})

what am i suppose to do?

1 Like
2

Hi @allen2014, I’m not sure that this is the correct answer, but try changing <ion-content class="has-header"> to <ion-content has-header="true">.

There may be some JavaScript magic that goes along with the has-header attribute that doesn’t happen when you just apply the class.