Using side menu and tabs in combination makes tabs cover up content

ionic-v1
1

Hey,

I am new to developing with Ionic. Thanks for your help in advance!

I created an app based on the sidemenu example. Now that I am done with all controllers I wanted to add some tabs at the bottom to all views. So I changed the code to:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" class=""></ion-nav-view>
      <ion-tabs class="tabs-positive tabs-icon-only">

          <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
              <!-- Tab 1 content -->
          </ion-tab>

          <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
              <!-- Tab 2 content -->
          </ion-tab>

          <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
              <!-- Tab 3 content -->
          </ion-tab>

      </ion-tabs>

  </ion-side-menu-content>
    

        <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menü</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
          <ion-item nav-clear menu-close href="#/app/home">
              <i class="icon ion-ios-home"></i> Home
          </ion-item>
          <ion-item nav-clear menu-close  href="#/app/browse">
              <i class="icon ion-ios-list-outline"></i> Programm
        </ion-item>

          <ion-item nav-clear menu-close href="#/app/contact-list">
              <i class="icon ion-person-stalker"></i> Personen
          </ion-item>
          <ion-item nav-clear menu-close  href="#/app/exhibitor-list">
              <i class="icon ion-android-checkbox-outline-blank"></i> Aussteller
          </ion-item>
          <ion-item nav-clear menu-close  href="#/app/favs">
              <i class="icon ion-ios-star-outline"></i> Favoriten
          </ion-item>
        <ion-item nav-clear menu-close href="#/app/search-all">
            <i class="icon ion-ios-search"></i> Suche
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/browse">
          Kontakt
        </ion-item>
          <ion-item nav-clear menu-close href="#/app/settings">
              <i class="icon ion-ios-gear-outline"></i> Einstellungen
          </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

All works well but the tabs cover the view. It must be not adjusting the nav-vie properly. Any I ideas on how to solve this?

Thank you!
Sebastian

2

I have a similar problem with my app.
The nav bar seems to not be adjusting to my side menu which means the top item in the list gets covered.

image
Screen Shot 2016-04-30 at 16.13.15.png845×567 124 KB

Hopefully someone can help us out.

Not sure if it’s related but the nav bar button to toggle the side menu is not working either, though it works fine when I copy/paste the code into the template and use it there.