Tab bar makes page invisible

Question

When I add the ons-tabbar to my page, it overlaps my entire page so that I cannot click on anything other than the tabs themselves.

My page looks like this (each page has its 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> 

Answer 1

Do not use ons-tabbar using the following syntax:

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

Also, try implementing ons-tabbar outside of ons-page and bind a single ons-tab to a 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 sample CodePen working code based on your code:

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

Hope this helps!

Answer 2

ons-tabbar has child children. You specify the contents of the bottom icon of the tab icon as content, and you must specify the contents of the page as the identifier of the page parameter = "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 are some working codes: http://codepen.io/anon/pen/yeQdMX