1 SideMenu, Multiple Ion View Headers

ionic-v1
1

Hi :),

I use the last version of Ionic (Beta 11), and I want to know what is the best solution for this problem :

I got in my app 1 abstract SideMenu used by two ion-view : map.html and message.html

But I want an header totally different for each page.

For map : 1 OpenLeftMenuButton + 1 search box

For message : 1 BackButton + 1 OpenLeftMenuButton + 1 Info Button to the right

I am a little confused by all Ionic/HTML structures :
- Ion header bar
- div class header
- etc…

In the doc, to add a SearchBox in the header, they use a Div with header as class

But for a “map page” (using Google Maps), it’s not working due to scroll(false) attribute…

Here the code without the attribute :

     <ion-view hide-nav-bar="true">
         <div class="bar bar-header item-input-inset">
             <label class="item-input-wrapper">
                 <i class="icon ion-ios7-search placeholder-icon"></i>
                 <input type="search" placeholder="Search">
             </label>
         </div>
         <ion-content id="map" data-tap-disabled="true"></ion-content>
     </ion-view>

With this code, the search box appears in the map header but there is a JavaScript error :
“TypeError: Cannot read property ‘scrollWidth’ of null”

So my questions are :

  • How to add a map header without error?
  • What is the best way to customize each page header (button, inputs, title, etc) but keep 1 identical sidemenu?
  • Is there a documentation explaining each Ionic Structure and limits ? (for example, is it possible to use ion header bar inside ion view, what attributes can cause errors, etc)

Thanks in advance :slight_smile:

2

No one to help me with this?

Or at least maybe give me another forum subject speaking of something similar? :blush:

I read the whole ionic doc, however difference between css and js ionic component use cases can be fuzzy :confused:

In code examples, we often see the two methods and it’s often working whichever way

Am I the only one wanting dynamic app header (button, form, text, …) depending on the view but the same abstract layout (in this case the same side-menu)? sort of sub-layout? :smiley:

Thanks in advance :wink:

3

For this, your best just using two different ion-header-bar's in the different views.

4

Thank you for trying to help me,

concerning differences between js/css components, I found a post giving advices yesterday :

Maybe an “official” Ionic blog article about this could be great for beginners :slight_smile:

Concerning ion-header-bar, I remember having dificulties to make it work with my header search input for google maps, but it’s maybe a special case.

I can’t test it now, but is the following syntax correct ?

<ion-view>
      <ion-header-bar align-title="left" class="bar-positive">
             <label class="item-input-wrapper">
                 <i class="icon ion-ios7-search placeholder-icon"></i>
                 <input type="search" placeholder="Search">
             </label>
      </ion-header-bar>
      <ion-content id="map" data-tap-disabled="true"></ion-content>
</ion-view>

If not, how to make this working with ion-header-bar?
Did I need to use special ion-view attribute (hide-nav, etc …) ?

Thanks

1 Like
5

This is based on our google map example on our codepen page.
It should cover what you need

1 Like
6

Thank you for this working example. :smiley:

For those using ion-view in separate file and an abstract side-menu (with a predefined ion-nav-bar)

Don’t forget the hide-nav-bar tag, here same code with ion-view (for my particular case) :

<ion-view hide-nav-bar="true">
    <ion-header-bar class="bar-dark item-input-inset" >
        <label class="item-input-wrapper">
            <i class="icon ion-ios7-search placeholder-icon"></i>
            <input type="search" placeholder="Search">
        </label>
    </ion-header-bar>
    <ion-content>
        <div id="map" data-tap-disabled="true"></div>
    </ion-content>
    <ion-footer-bar class="bar-dark">
        <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
    </ion-footer-bar>
</ion-view>

Without the hide attribute, it’s in fact the bar from the sidemenu which is used.

1 Like
7

How do I keep sub header just below the header title ?

I mean does ionic framework support this… ?