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>2 Answers, 1 is accepted
0
Hi Matt,
The problem comes from the fact that Kendo UI Mobile uses CSS flexboxes to format its contents. So in your case when you are setting position absolute for elements without height they are not positioned correctly. This is why you need to set height of the elements in order to be displayed correctly. Please check the following example:
http://jsbin.com/utOmerU/2/edit
Regards,
Kiril Nikolov
Telerik
The problem comes from the fact that Kendo UI Mobile uses CSS flexboxes to format its contents. So in your case when you are setting position absolute for elements without height they are not positioned correctly. This is why you need to set height of the elements in order to be displayed correctly. Please check the following example:
http://jsbin.com/utOmerU/2/edit
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
Rank 1
answered on 08 Nov 2013, 03:03 AM
Perfect thank you for the clarification.