Tab bar makes the page unclickable - onsen-ui

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>

Answer 1

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!

Answer 2

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