Side Menu issue when used with abstract state

ionic-v1
1

All,
I am building an app where I have an abstract state called main and from there I spin-off to multiple states like main.landing, main.cat, main.profile etc. I have corresponding files (controllers and partials for all states including abstract state).
I want my side menu to show up same for all those states.
So I have put the side menu code in the main_base partial which gets loaded for all. In that for the center content I have nav-view tag which gets loaded diff for different routes.

So far so good - works perfectly - I have 5 such pages working seamlessly.

Problem is in the side menu. While it shows up and acts properly, the top part is chopped off - seems to me some sort of div layering issue.
Here is my code for main_base and attached is the image for the side menu bar

Any help will be really appreciated …

<ion-nav-back-button class="button-icon ion-ios7-arrow-back"> </ion-nav-back-button>

<ion-nav-buttons side="left">
    <button class="button button-icon icon  ion-navicon"  ng-click="toggleLeft()">

    </button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
    <button class="button button-icon icon  ion-ios7-cart" ng-click="toggleRight()">

    </button>
</ion-nav-buttons>

<ion-side-menus>
    <!-- Center content -->
    <ion-side-menu-content >
        <ion-nav-view name="main-area"> </ion-nav-view>
    </ion-side-menu-content>

    <!-- Left menu -->
    <ion-side-menu side="left">
        <ion-header-bar class="bar-royal">
            <h1 class="title">Shops</h1>
        </ion-header-bar>
        <ion-scroll direction="y">
            <ion-list >
                <ion-item
                        can-swipe="false"
                          ng-repeat="c in level1_cat_list"
                          item="item"
                        >
                    <a menu-close class="item item-content" ng-click="handle_tap('main.cat', {id:'{{c.link}}' })" >
                   {{c.name}}
                    </a>
                </ion-item>
            </ion-list>
        </ion-scroll>
    </ion-side-menu>

    <!-- Right menu -->
    <ion-side-menu side="right">
        <ion-header-bar class="bar-royal">
            <h1 class="title">Cart</h1>
        </ion-header-bar>
    </ion-side-menu>
</ion-side-menus>

<div class="title">{{user.first_name}} &nbsp {{user.last_name}} </div>

<button class="button button-icon icon ion-ios7-search-strong"
        ng-click="open_action_sheet()" ></button>

<button class="button button-icon icon ion-heart" ng-click="handle_tap('main.points', {})"  title="My Points"></button>

2

Hmm, sees like some of your html is chopped. Would you mind thawing a code pen or plunker together?

Edit

Seems like you just have your ion-nav-bar in the wrong place. trying moving it to this

 <ion-side-menu-content>
    <ion-nav-bar class="bar-positive nav-title-slide-ios7">

      <ion-nav-back-button class="button-icon ion-ios7-arrow-back"></ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="main-area"></ion-nav-view>
  </ion-side-menu-content>

Having it inside the menu content will keep it from cutting off everything in the side menu

3

Thanks Mike - it worked like a charm.
By the way special thanks for the whole effort.

4

I have the same kind of issue. I want to have a login form at the beginning of my App and then access to the main page of the App using an abstract state tabs which contains two side menus (one left and one right) and 3 tabs.
The tabs seem to work fine but the side menus are not displayed :frowning:. If I put the side menus declarations out of the abstract state, side menus and tabs are well displayed.

Do you have an idea where it can come from ? I can’t figure it out myself …

Here is a codepen showing the problem I have :

See the Pen jPRRZZ by Marion (@MarionLenfant) on CodePen.

Thanks in advance