I'm trying to have a list along the left side of the screen and content along the right. I tried using the SplitView but I want a header that spans the enter width of the document. I have everything working on the Icenium simulator, but when I test it on the device the list (absolute positioned content) doesn't show up.
Since it's on the device, I can't debut the HTML/CSS myself. Any ideas?
Since it's on the device, I can't debut the HTML/CSS myself. Any ideas?
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
/>
<
meta
name
=
"format-detection"
content
=
"telephone=no"
/>
<
meta
name
=
"viewport"
content
=
"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
/>
<
link
rel
=
"stylesheet"
href
=
"css/kendo.mobile.all.css"
/>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo.mobile.js"
></
script
>
<
title
>Hello World</
title
>
</
head
>
<
body
>
<
div
id
=
"viewEventList"
data-role
=
"view"
>
<
div
data-role
=
"header"
style
=
"background-color: #FFFFFF;"
>
<
div
data-role
=
"navbar"
style
=
"padding-top: 10px;"
>
Test
</
div
>
</
div
>
<
div
>
<
div
data-role
=
"scroller"
style
=
"position: absolute; top: 0px; left: 0px; bottom: 0px; width: 245px;"
>
<
div
>
<
div
style
=
"border: 1px solid #000000; border-bottom: 3px; margin: 15px; background-color: #FFFFFF;"
>
<!-- Repeat until too many for screen to handle -->
<
div
style
=
"border-bottom: solid 1px #000000; padding: 5px;"
>
Item
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
var app = new kendo.mobile.Application();
</
script
>
</
body
>
</
html
>