Why is the subheader not showing?

1

I’m trying to create a search bar in an Ionic app. To do this, I’m using bar-subheader but that doesn’t work: The subheader is not shown.

My code:

<ion-view view-title="Empresas">

    <div class="bar bar-subheader item-input-inset padding">
         <label class="item-input-wrapper">
          <i class="icon ion-ios7-search placeholder-icon"></i>
          <input type="search" placeholder="Search" ng-model="pesquisar">
          </label>
     </div>

 <ion-content class="padding has-footer has-subheader">

    <ion-list>      
        <ion-item class="item item-thumbnail-left" 
              ng-repeat="item in items | filter:pesquisar" 
              type="item-text-wrap"
              ng-click="getEmpresa({{item.Empresa.id}})" >

            <img ng-src='{{item.Empresa.imagem}}'>          
            <div style="font-weight:bold;" class="item-text-wrap">{{item.Empresa.nome}}</div>
            <div style="font-size:small" class="item-text-wrap">{{item.Empresa.tipo}}</div>
            <div style="font-size:small">{{item.Empresa.endereco}}</div>
            <div style="font-size:small">{{item.Empresa.telefone}}</div>

            <a href="tel:{{item.Empresa.telefone}}" class="button button-small button-balanced icon ion-ios-telephone">
            </a> 

        </ion-item>
        <ion-infinite-scroll on-infinite="loadMore();" distance="1%" ng-if='!moreData'></ion-infinite-scroll>
   </ion-list>

  </ion-content>

</ion-view>
2

You are missing the opening:

<ion-view title="Title goes here">

See, for example: https://github.com/Robinyo/Vardyger/blob/master/core/client/app/templates/main-template.html

3

I added <ion-view view-title="Empresa"> but still does not work

4

Did you begin with a starter template?

E.g., $ ionic start myApp sidemenu

Try adding an input to the header:

E.g., http://ionicframework.com/docs/components/#bar-inputs

5

I started with tabs, the tabs are on top.

look at the image: http://i.imgur.com/hsXvgku.png

I think the subheader is showing, but does not showing input to search. I can’t understand why.

6

I think you have:

  • a header bar “Empresas”
  • a sub header bar with tabs
  • and a “sub” sub header bar (use Chrome’s Inspect Element to see what’s going on)

I had a similar issue, see GitHub - Robinyo/Vardyger: The Vardyger publishing platform the Editor screen shot

See:

7

you’re right. I added style="top:96px" and showed the subheader.

Looking at your suggestions, I see that you created styles.scss with bar-subsubheader and has-subsubheader, How could I do this works on my project ? I don’t know how to work with scss.

8

Working with SASS is pretty straight forward, see for example: http://robferguson.org/2015/07/07/customising-ionic-with-sass/

Otherwise, just create the styles you need inline or as you do currently.

I don’t use the Ionic Starter projects, I use generator-ionic: http://robferguson.org/2015/07/06/ionic-angular-and-cordova/

1 Like
9

Thanks for your help.