Hello,
I have a list view with a header. It is working fine until the list gets many. The currently we have 32 items. The problem is that when we are tabbing through the items, entering values all the way to the last item and then we try to scroll back to the top, it won't let us. It springs back to the middle and cannot get to the top nor get to the header. We have navigation buttons at the top and it is important that we get to the header. Is there any way to resolve this?
This happens in iPhone, IPad, Safari, and IE 11. All do the same thing.
My html is below (omitted in the middle since there are more than 30 items in the list):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="./Scripts/KendoUI/jquery.min.js"></script>
<script src="./Scripts/KendoUI/kendo.mobile.min.js"></script>
<script src="./Scripts/KendoUI/console.js"></script>
<script src="./Scripts/jquery.signaturepad.min.js"></script>
<script src="./Scripts/json3.min.js"></script>
<link href="./Content/KendoUI/kendo.mobile.all.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" data-title="BUBBA" id="edit-event-view" >
<header data-role="header">
<div data-role="navbar">
<a data-align="right" data-role="button" class="nav-button" >Log Out</a>
<a data-align="left" data-role="button" class="nav-button">Main</a>
<span id="edit-event-title" data-role="view-title" />
</div>
</header>
<ul data-role="listview" >
<li style=""><label for="f15303">First Name</label><input type="text" id="f15303" value="" style="text-transform: uppercase;" text-casing="3" /></li>
<li style=""><label for="f15304">Middle Name</label><input type="text" id="f15304" value="" style="text-transform: uppercase;" text-casing="3" /></li>
<li style=""><label for="f15305">Last Name</label><input type="text" id="f15305" value="" style="text-transform: uppercase;" text-casing="3" /></li>
<li style=""><label for="f15306">Suffix<select id="f15306" style="text-transform: uppercase;" ><option value="0"> </option><option value="3">I</option><option value="4">II</option><option value="5">III</option><option value="6">IV</option><option value="11">IX</option><option value="1">JR</option><option value="2">SR</option><option value="7">V</option><option value="8">VI</option><option value="9">VII</option><option value="10">VIII</option><option value="12">X</option></select></label></li>
....(Omitted)
<li style=""><label for="f15307">Sex<select id="f15307" style="text-transform: uppercase;" ><option value="" selected="selected"></option><option value="M">Male</option><option value="F">Female</option><option value="U">Unknown</option></select></label></li>
<li style=""><label for="f15520">How Injury Occurred</label><textarea id="f15520" style="text-transform: uppercase;" text-casing="3" ></textarea></li>
<li style=""><label for="i15405" >Year of Death</label><input type="text" id="i15405" class="readonly-text" value="" default-value="" style="text-transform: uppercase; background-color: silver; " ></li>
<li style=""><label for="i15576" >Alert Count</label><input type="text" id="i15576" class="readonly-text" value="" default-value="" style="text-transform: uppercase; background-color: silver; " ></li>
</ul>
</div>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Thanks!