Please see the attached file with code. I also attached an image where my back buton is not rendering properly. Can you please help me with that too.
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<link href="kendo.mobile.all.min.css" rel="stylesheet" />
<link href="kendo.common.min.css" rel="stylesheet" />
<link href="kendo.default.min.css" rel="stylesheet" />
<script src="kendo.mobile.button.min.js"></script>
<script src="kendo.mobile.tabstrip.min.js"></script>
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
</head>
<body>
<!-- Login View -->
<div data-role="view" id="loginview" data-layout="loginlayout">
<ul data-role="listview" data-style="inset">
<li>
User Name
<input type="text" name="userName" id="userName" value="" placeholder="Enter use name" />
</li>
<li>
Password
<input type="text" name="password" id="name" value="" placeholder="Enter password"/>
</li>
</ul>
<a href="#mydayview" data-role="button" style="background-color: light blue; width:100px;">Login</a>
</div>
<!-- My Day View -->
<div data-role="view" data-layout="default" id="mydayview" data-title="My Day">
My Day
</div>
<!-- List View -->
<div data-role="view" id="respondantList" data-layout="default" data-title="Respondent List">
Respodent list
</div>
<!-- Default Layout -->
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">
<a data-align="left" data-role="backbutton">Back</a>
<span data-role="view-title"></span>
</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#mydayview" data-icon="favorites">My Day</a>
<a href="#respondantList" data-icon="about">List</a>
</div>
</footer>
</section>
<!-- Login Layout -->
<section data-role="layout" data-id="loginlayout">
<header data-role="header">
<div data-role="navbar">My App</div>
</header>
<!--View content will render here-->
</section>
<style scoped>
.km-android .km-tabstrip a
{
color: #a8a8a8;
}
.km-android .km-tabstrip .km-text
{
text-indent: 0;
height: 3.7rem;
margin-top: -2.5rem;
padding-top: 1.8rem;
text-indent: 0;
font-size: 1em;
}
</style>
<script>
var app = new kendo.mobile.Application(document.body,
{
/*
platform:'android'
*/
});
</script>
</body>
</html>