I am working to develop an android app using Ecllipse, PhoneGap and Kendo UI. Expectation is that, when I tap on app icon in the applications list in android device/Emulator it opens the index.html page.
I am trying to code to have the header, content and footer in index.html. I used "data-role"s like header, content and footer.
Now, till I open the page in FF or Chrome in my desktop it shows correctly however when I install the apk in android emulator v2.2, there everything is going wrong like header is placed at the bottom of the display in emulator, header goes to the top. background color is changed to black where actually it's white. header/footer color is changed too.
Any idea to fix this issue?
find the screen shots attached. In both I used index.html.
index.html
---------------------------
<!DOCTYPE HTML>
<html>
<head>
<title>Registration</title>
<script
type="text/javascript" charset="utf-8"
src="phonegap-1.2.0.js"></script> <script
src="jquery.min.js"></script>
<link rel="stylesheet" href="kendo.mobile.css" />
<script
src="kendo.mobile.min.js"></script>
</head>
<body>
<div data-role="view" >
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title">Header</span><!--
/view-title -->
<span data-align="left" data-role="button">
<img src="ic_launcher.png" width="40" height="40" /> </span>
<span class="login" data-align="right" data-role="button">Log In</span><!-- /button
--> </div><!-- /navbar
-->
</div><!-- /header
-->
<div data-role="content">
</div><!-- /content -->
<div data-role="footer" >
<div data-role="tabstrip" style="height:
55px;">
Footer
</div><!--
/tabstrip -->
</div><!-- /footer
-->
</div><!-- /view
-->
<script>
$(document).ready(function() {
$(".login").click(function(){
//location.href = 'testredirect.html';
});
}); // document.ready ends
</script>
</body>
</html>