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
>