title: Ionic, how to set tab bar into header?
body: <p>I'm trying to add tab bar under the header to produce result like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Z8QZ2.jpg" alt="enter image description here"></p>
  
  <p>But without luck.</p>
  
  <p>Tab bar is displayed under the header but has ugly margins (see image) and is not static, is scolling with scrolling view.</p>
  
  <p><img src="https://i.stack.imgur.com/YFfo3.png" alt="enter image description here"> </p>
  
  <p>Could somebdoy tell to me what i'm doing wrong? </p>
  
  <p>Thanks for any help. </p>
  
  <p><strong>Template code of the layout is the following:</strong></p>
  
  <pre><code>&lt;ion-view title="{{ 'RESULTS_BY_DAY' | translate }}"&gt;
  
      &lt;ion-nav-buttons side="left"&gt;
          &lt;button class="button button-icon icon  ion-chevron-left" ui-sref="home"&gt;
          &lt;/button&gt;
      &lt;/ion-nav-buttons&gt;
  
      &lt;ion-nav-buttons side="right"&gt;
          &lt;button class="button button-icon icon ion-stats-bars" ui-sref="daily-chart"&gt;
          &lt;/button&gt;
      &lt;/ion-nav-buttons&gt;
  
    &lt;ion-content class="padding" ng-controller="DailyListCtrl"&gt;
  
  &lt;div class="bar bar-header bar-light"&gt;
    &lt;!--tabbar--&gt;
      &lt;div class="tabs-striped tabs-background-positive tabs-light tabs-icon-left"&gt;
          &lt;div class="tabs"&gt;
              &lt;a class="tab-item active" ui-sref="daily-list" href="/#/daily-list"&gt;
                  {{ 'DAYS' | translate }}
              &lt;/a&gt;
              &lt;a class="tab-item " ui-sref="weekly-list" href="/#/weekly-list"&gt;
                  {{ 'WEEKS' | translate }}
              &lt;/a&gt;
              &lt;a class="tab-item " ui-sref="monthly-list" href="/#/monthly-list"&gt;
                  {{ 'MONTHS' | translate }}
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
        &lt;!--WRITEOUT OVERAL STATS FOR DAYS --&gt;
        &lt;ion-list class="list" ng-init="setDateRange('today');" &gt;
  
            &lt;!--IF NO ITEM IS FOUND --&gt;
            &lt;ion-item class="listCenter" ng-if="listData.length == 0 || listData.length == null"&gt;
                &lt;h2&gt;{{ 'NO_DATA_FOUND' | translate }}&lt;/h2&gt;
            &lt;/ion-item&gt;
  
            &lt;ion-item class="item" ng-repeat="listDataItem in listData"&gt;
                    &lt;div class="listDateTimeBlock"&gt;
                      &lt;div&gt;{{listDataItem.DATE_FROM_DD}}&lt;/div&gt;
                      &lt;div&gt;{{listDataItem.DATE_FROM_MM}}&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="listSuccessRateBlock"&gt;
                      &lt;h3&gt;{{ 'APPOINTMENT_SUCCESS_RATE' | translate }}: {{listDataItem.SUCCESS_RATE}} %&lt;/h3&gt;
                      &lt;h4&gt;{{ 'SUCCESS_RATE_SINCE_START' | translate }}: {{listDataItem.SUCCESS_RATE_SINCE}} %&lt;/h4&gt;
                      &lt;h4&gt;{{ 'MY_DEFICIT' | translate }}: {{listDataItem.DEFICIT}} %&lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div class="listInformationBlock"&gt;
                      &lt;h3&gt;{{ 'DIALS' | translate }} : {{listDataItem.DIALS_CNT}}&lt;/h3&gt;
                      &lt;h3&gt;{{ 'CONVERSATIONS' | translate }} : {{listDataItem.CONVERS_CNT}}&lt;/h3&gt;
                      &lt;h3&gt;{{ 'APPOINTMENTS' | translate }} : {{listDataItem.APPT_CNT}}&lt;/h3&gt;
                    &lt;/div&gt;
            &lt;/ion-item&gt;
  
            &lt;ion-infinite-scroll
                    ng-if="canLoadMore"
                    icon="ion-loading-c"
                    distance="10%"
                    on-infinite="setDateRange('past');"&gt;
            &lt;/ion-infinite-scroll&gt;
  
        &lt;/ion-list&gt;
    &lt;/ion-content&gt;
  
  
  
  &lt;/ion-view&gt;
  </code></pre>