Hi!
I have been spending the last few hours on this problem. I am trying to present a view that contains a html select element and uses a layout element. My code is as follows:
<head>
<title>Branch</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.mobile-1.1.1.min.js"></script>
<script src="./js/kendo.mobile.min.js"></script>
<link href="./styles/kendo.common.min.css" rel="stylesheet" />
<link href="./styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="myBookings" data-id="myBookings" data-layout="overview" data-title="My Bookings">
Current Branch: <select id="branch-select">
</select>
</div>
<div data-role="layout" data-id="overview">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application($(document.body)/*, {initial:"myBookings"}*/);
</script>
</body>
This almost works. However, if I inspect the webpage, the <div> element of the view is in the website three times. For ios users, this means that they can navigate through all three select elements using the "previous"/"next" buttons when the select is expanded.
I already tried uncommenting the commented line with the initial setting. However, this does not work at all. According to the console, the browser appears to try to load a file named "myBookings".
How do i get this to work so that the ios devices treat the select as one?