Tab bar makes the page unclickable

Question

When i add a ons-tabbar to my page it overlaps my entire page so that i can't click on anything except the tabs itself.

My page looks like the following (each page has it own html file):

<ons-page>

<ons-tabbar>
    <label class="tab-bar__item">
        <input type="radio" name="tab-bar-a" checked="checked">
        <button class="tab-bar__button">
            <i class="tab-bar__icon fa fa-dashboard"></i>
            <div class="tab-bar__label">Dashboard</div>
        </button>
    </label>

    <label class="tab-bar__item" ng-click="myNav.pushPage('views/device-settings.html', {animation : 'slide'})">
        <button class="tab-bar__button">
            <i class="tab-bar__icon fa fa-cogs"></i>
            <div class="tab-bar__label">Settings</div>
        </button>
    </label>
</ons-tabbar>

<ons-toolbar>
    <div class="left">
        <ons-toolbar-button ng-click="menu.toggle()">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
    </div>
    <div class="center">Device</div>
</ons-toolbar>

<ons-list id="device">
    <ons-list-item>
        <label class="checkbox">
            <input type="checkbox" checked="checked">
            <div class="checkbox__checkmark"></div>
            Switch 1
        </label>
        <div class="switch-detail">
            <ons-icon icon="fa-calendar"></ons-icon>
            Last enabled: 9 February 2016 on 17:39
        </div>
    </ons-list-item>
    <ons-list-item>
        <label class="checkbox">
            <input type="checkbox" checked="checked">
            <div class="checkbox__checkmark"></div>
            Switch 2
        </label>
        <div class="switch-detail">
            <ons-icon icon="fa-calendar"></ons-icon>
            Last enabled: 9 February 2016 on 17:39
        </div>
    </ons-list-item>
    <ons-list-item>
        <label class="checkbox">
            <input type="checkbox" checked="checked">
            <div class="checkbox__checkmark"></div>
            Switch 3
        </label>
        <div class="switch-detail">
            <ons-icon icon="fa-calendar"></ons-icon>
            Last enabled: 9 February 2016 on 17:39
        </div>
    </ons-list-item>
</ons-list>

Andi Pavllo · Answer 1 · 2016-02-10T03:23:56.407

Don't implement ons-tabbar like that, use the following syntax:

<ons-tabbar>
  <ons-tab>tab1</ons-tab>
  <ons-tab>tab2</ons-tab>
</ons-tabbar>

Also, try to implement the ons-tabbar outside ons-page and link the single ons-tab to the relative page (using ons-template):

<ons-tabbar>
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="fav.html" active="true">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorites</span>
  </ons-tab>
  <ons-tab page="settings.html" active="true">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html>
  <ons-page>
    PAGE CONTENT
  </ons-page>
</ons-template>

Here is a working CodePen example, based on your code:

http://codepen.io/andipavllo/pen/rxQEeY

Hope it helps!

score 2 · Answer 2 · answered Feb 10 '16 at 01:28

ons-tabbar has children of kind ons-tab. You give the content of the lower tabbar icon array as a content and have to give the content of the page as an parameter id of page="ID".

 <ons-tabbar var="tabbar" animation="fade">
  <ons-tab
    active="true"
    icon="ion-chatbox-working"
    label="Comments"
    page="page1.html">
  </ons-tab>
  <ons-tab
    icon="ion-ios-cog"
    label="Settings"
    page="page2.html">
  </ons-tab>
</ons-tabbar>
<ons-template id="page1.html" >
  <ons-toolbar>
    <div class="center">Page 1</div>
  </ons-toolbar>
</ons-template>
  <ons-template id="page2.html" >
  <ons-toolbar>
    <div class="center">Page 2</div>
  </ons-toolbar>
</ons-template>

Here is some working codePen: http://codepen.io/anon/pen/yeQdMX

Tab bar makes the page unclickable

2 Answers2