<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>My Open Cal</title> <!-- Kendo UI Files --> <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.mobile.min.js" type="text/javascript"></script> <script> var twitterDataSource; $( //jQuery page load function () { var app = new kendo.mobile.Application($(document.body), { layout: "layout", icon: "/images/xboxavatar.png" }); }) function setupListView() { twitterDataSource = new kendo.data.DataSource( { transport: { read: { contentType: "application/json; charset=utf-8", type: "GET", dataType: "jsonp", data: { q: "#tampa" } } }, schema: { data: "results" } }) $("#ulMyCal").kendoMobileListView({ pullToRefresh: true, appendOnRefresh: true, dataSource: twitterDataSource, template: "<p>${text}</p>" }); } </script></head><body> <!-- Layout for all views in the application, as specified when the app is created --> <div data-role="layout" data-id="layout"> <div data-role="header" > <div data-role="navbar"> <span data-role="view-title">My Open Cal</span> </div> </div> <div data-role="footer"> <div data-role="tabstrip"> <a href="#index" data-icon="organize">My Calendar</a> <a href="#search" data-icon="search">Search</a> <a href="settings.htm" data-icon="settings">Settings</a> </div> </div> </div> <div data-role="view" id="index" data-title = "My Calendar" data-init="setupListView" <div style="text-align:center"> <ul id="ulMyCal" data-style="inset"> </ul> </div> </div> <div data-role="view" id = "search" data-title = "Search"> </div></body></html>1 Answer, 1 is accepted
0
Hello,
Petyo
the Telerik team
Your markup is invalid, this is the reason for that behavior. See this jsFiddle for the fixed version.
Greetings,Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!