How do add a ion-header in ion-view?

ionic-v1
1

Hi all,
I can not add ion-header in ion-view.
ion-header not show.
My code: thank you.

 <ion-view title="Speakmap">
    <ion-nav-buttons side="left">
        <button ng-click="toggleLeft()" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
   <ion-header-bar align-title="left" class="item-input-inset">
    <label class="item-input-wrapper">
        <i class="icon ion-ios7-search placeholder-icon"></i>
        <input type="search">
    </label>
    <button class="button button-clear" >
        Cancel
    </button>
</ion-header-bar>
    <ion-nav-buttons side="right">
        <button ng-click="toggleSearchBox()" class="button button-icon ion-ios7-search-strong"></button>
    </ion-nav-buttons>   
    
    <ion-content scroll="false">
    </ion-content>
</ion-view>
2

Do you have a ion-nav-bar in your main index.html? Can you put together a codepen? You should be able to add an ion-header-bar in your view.

3

@mhartington

my full code in here: http://codepen.io/snaired/pen/LGqvf

4

The header was there, it was just getting covered by the nav-header.

I added the class bar-subheader to push it below the nav-bar and all is good.

5

my problem solved.

I added hide-nav-bar="true" directive to <ion-view>

1 Like