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ề'}}

                              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 side="left" ng-controller="NavController">

          <ion-header-bar class="bar bar-header bar-assertive">
              <h1 class="title">Second Section Left Menu</h1>
          <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="" nav-clear class="item" ng-click="toggleLeft()">Chat</a>
                  <a ui-sref="snd.drink" nav-clear class="item" ng-click="toggleLeft()">Drink</a>
          <ion-footer-bar class="bar bar-footer">
              <a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>


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()}}


please help me solve this.
many thanks

You probably combined them in a wrong way.

Take a look at this tutorial:

1 Like