Inserting a subheader in the basic sidemenu app

ionic-v1
1

I need to implement a site-wide, persistent div (maybe a button, not sure yet) that shows up given certain conditions in the data. I’m trying to figure out where to put this div to have it show up like a subheader (I’m using a variation on the basic sidemenu app), but I can’t figure out exactly where to put it. Obviously, I’d rather not put it in each page. I’ve been trying to put it in the menu.html template that’s part of the default sidemenu app, but nothing seems to work. I’m getting overlap with the content.

All suggestions appreciated!
Jonathan

2

Sorry to bump this, but I’m 90% sure there’s an easy solution I’m just not seeing. Help?

3

For example, this:

<ion-side-menu-content>
    <ion-nav-bar class="bar-dark xmd-nav">

        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
        </ion-nav-buttons>

        <ion-nav-buttons side="right">
            <span style="padding-top: 5px; padding-right: 5px;" ng-click="goHome();">
                <img height="20" style="vertical-align: middle;" src="images/app_icon_home.png"/>
            </span>
        </ion-nav-buttons>
    </ion-nav-bar>
      
        <button class="button button-full" ng-click="doSomething()">
        I'm a button
        </button>

    <ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>

The “I’m a button” bit. It shows up, but it’s underneath the main menu. I’m wanting to get clickable alerts showing up between the main header and the content without having to insert it in every page.

4

Something like this?:

5

For some reason your codepen isn’t loading properly for me.

But I copied your ion-header-bar (HEYO) into the same place on my code, and it works. Sort of. The problem comes when I want to add an ng-if or ng-show to the ion-header-bar element.

ng-if false - looks fine
ng-if true - the content floats up under the sub-header

ng-show false - the content floats up undernead the header
ng-show true - looks fine

6

There is a reason that Angular provides two different ways to show/hide things. Ng-If tells angular to actually remove that element from the page DOM. So if you do this and look at the inspected space, the header bar won’t exist. (Unless ionic somehow overrides this on the header bar.)

The Ng-show attribute essentially just applies a display:none (as well as does its animations if set up) to the element. So depending on the CSS of the header bar this can cause to separate things to happen.

There are also two classes that can help fix this: has-subheader and has-header

has-header will push the content down for just the regular header, and has-subheader I think does the full height of the header and subheader. You may need to dynamically apply this to the ion-content element so that your content isn’t being pushed under the header bar. This can be achieved with something like this:

ng-class="{ has-header : showHeader }"

I hope this sets you in the right direction. The documentation that the Ionic team has taken all the time to prepare for you is going to be your best friend. Also their code pen site has a lot of amazing examples you can pick apart.

7

Right, I understand the difference between ng-if and ng-show. I just don’t understand why they produce the behaviors they do in this situation.

I tried including a has-subheader=‘true’ just to see if it would fix the issue, but alas, no.

I agree the documentation is great. But some stuff feels like magic in the default sidemenu project. Like, there’s no reference to has-header anywhere, but the spacing between the header bar and the content lines up just fine. I’m just worried I’m butting up against something less obvious.

I’ll try to put a codepen together to illustrate some things.

8

You’re good, admittedly the docs can miss things like that between versions. I was told that “ion-content” is supposed to know if there is a header but I don’t build my apps using the same flow as I am “recommended” to be doing haha. But you can use has-header in the content. If you build the code pen I’ll try and tinker with it, it sounds like your app is pretty unique in UX/UI as is mine.