Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
96
rated 0 times [  99] [ 3]  / answers: 1 / hits: 55058  / 10 Years ago, wed, august 20, 2014, 12:00:00

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'>&deg;F</button>
<button class=button button-positive button-radio ng-value='c'>&deg;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>

More From » html

 Answers
20

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.


[#69713] Monday, August 18, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
tristab

Total Points: 735
Total Questions: 106
Total Answers: 96

Location: Grenada
Member since Sun, Dec 20, 2020
3 Years ago
tristab questions
Sat, Sep 25, 21, 00:00, 3 Years ago
Sun, Jan 31, 21, 00:00, 3 Years ago
Wed, Dec 2, 20, 00:00, 4 Years ago
Fri, Oct 23, 20, 00:00, 4 Years ago
;