Tab bar be cut off when use tab & side menu in app

Hi there,

My app using side menu & tab bar, my tab bar seem tobe cut-off at the bottom, in header of ion-view appear a space like image bellow:


Here my config in index.html

          The nav bar that will be updated as we navigate between views.
          -->
          <ion-nav-bar class="bar-stable bar-vihat">
              <ion-nav-back-button class="button-icon">
                  <i class="ion-chevron-left"></i>{{getTitle() || '  Trở về'}}
              </ion-nav-back-button>

          </ion-nav-bar>
          <!--
                              The views will be rendered in the <ion-nav-view> directive below
                              Templates are in the /templates folder (but you could also
                              have templates inline in this html file if you'd like).
          -->
          <ion-nav-view animation="slide-left-right"></ion-nav-view>
      </ion-side-menu-content>
      <ion-side-menu side="left" ng-controller="NavController">

          <ion-header-bar class="bar bar-header bar-assertive">
              <h1 class="title">Second Section Left Menu</h1>
          </ion-header-bar>
          <ion-content has-header="true">
              <ul class="list">
                  <a ui-sref="snd.home" nav-clear class="item" ng-click="toggleLeft()">Home</a>
                  <a ui-sref="snd.chat" nav-clear class="item" ng-click="toggleLeft()">Chat</a>
                  <a ui-sref="snd.drink" nav-clear class="item" ng-click="toggleLeft()">Drink</a>
              </ul>
          </ion-content>
          <ion-footer-bar class="bar bar-footer">
              <a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
          </ion-footer-bar>

      </ion-side-menu>
  </ion-side-menus>

if i remove side menu and just use tab bar everything ok, in index.html code like this:

      <ion-nav-bar class="bar-stable bar-vihat">
          <ion-nav-back-button class="button-icon">
              <i class="ion-chevron-left"></i>{{getTitle()}}
          </ion-nav-back-button>

      </ion-nav-bar>

please help me solve this.
many thanks

You probably combined them in a wrong way.

Take a look at this tutorial: http://www.gajotres.net/ionic-framework-tutorial-4-mixing-ui-patterns/

1 Like