ion-content overlap with ion-header-bar
I am building phonegap apps based on ionic framework. In one html page, I need one header and one content.But the header overlaps with the content. I am sorry I have no enough reputation to post the image.
The code is following. The html page is in the same folder with lib folder, which contains the ionic css and js folders.
<html>
<head>
<meta charset="utf-8">
<title>Weather</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="lib/css/ionic.css">
<script src="lib/js/ionic.bundle.js"></script>
<script src="lib/js/angular/angular-resource.js"></script>
</head>
<body>
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Settings</h1>
<button class="button button-clear" ng-click="closeSettings()">Close</button>
</ion-header-bar>
<ion-content has-header="true">
<div class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Units</span>
<ion-radio-buttons ng-model="settings.tempUnits">
<button class="button button-positive button-radio" ng-value="'f'">°F</button>
<button class="button button-positive button-radio" ng-value="'c'">°C</button>
</ion-radio-buttons>
</label>
</div>
</div>
</ion-content>
<!-- <ion-pane id="wrapper"> -->
<!-- <ion-header-bar class="bar bar-header bar-dark">
<button class="button icon-left ion-chevron-left button-clear button-dark" onclick="goBack()">Back</button>
<div class="title">xxx</div>
<button class="button button-icon icon ion-navicon"></button>
</ion-header-bar>
</body>
</html>
Answer
see:http://jsbin.com/pagacohovohe/1/edit
Give class="has-header" to ion-content.
<ion-content class="has-header">
</ion-content>
And you need to initialise your angular app - See javascript on my example. Note ng-controller and ng-app.