I have an index page which contains 3 tabs. The problem occurs within all tabs, but I will show here with the Home page. The problem that is occurring is that the some of the top content of the Home page is being overlapped by the title bar and the tabs bar so it is being hidden.
Inside of the Home html page I tried to wrap the code under with ion-content (see code below), but this hides the top content, squishes the height and it is no longer full screen, plus for the slides I have to swipe over the content because if I touch some of the padding or margin space it will not swipe anymore (slide 3 is a good example since it does not have a lot of content, you must press and swipe over the text for it to swipe). If I remove the ion-content tags, this adjusts the height properly, makes the swipe work so I don't have to swipe over content for it to work, but the problem of the top content being overlapped by the tabs and title bar still exists. How can I fit the home.html perfectly under the tabs and to utilize all the space?
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- ngCordova install script needed -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="mobileApp">
<script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab icon="ion-home-outline" ui-sref="tabs.Home">
<ion-nav-view name="Home-tab"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-info-outline" ui-sref="tabs.Info">
<ion-nav-view name="Info-tab"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-system-outline" ui-sref="tabs.System">
<ion-nav-view name="System-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<ion-nav-bar align-title="center" class="nav-title-slide-ios7 bar-calm">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
<ion-view hide-back-button="true">
<ion-nav-title>
<h1>TitleHere</h1>
</ion-nav-title>
</ion-view>
</ion-nav-view>
</body>
</html>
home.html
<ion-content>
<div class="item item-checkbox">
Checkbox Label
<label class="checkbox">
<input type="checkbox">
</label>
</div>
<ion-slide-box>
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">
<img src="http://code.ionicframework.com/assets/img/app_icon.png">
</div>
<p>
We've worked super hard to make you happy.
</p>
<p>
But if you are angry, too bad.
</p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
<p>
Too bad!
</p>
</ion-slide>
</ion-slide-box>
<div class="bar bar-footer bar-balanced" >
<div class="title">Footer</div>
</div>
</ion-content>
With ion-content. The top checkbox is hidden, the footer is not on the bottom and swiping only works if I hold and swipe over content not over white space.
If I remove ion-content. The footer goes to the bottom, I can swipe anywhere in the white and it will swipe, but the checkbox is still hidden by the title bar and the tabs.
