This is a migrated thread and some comments may be shown as answers.

Aboslute Position doesn't work on device with kendo.mobile.all.css

2 Answers 62 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Matt asked on 06 Nov 2013, 05:37 AM

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?

<!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 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;">

<div style="border-bottom: solid 1px #000000; padding: 5px;">

Item

</div>

<script>

var app = new kendo.mobile.Application();

</script>

</body>

</html>

Aboslute Position doesn't work on device with kendo.mobile.all.css

2 Answers, 1 is accepted