Shoji Kaburagi
Top achievements
Rank 1
Rank 1
Shoji Kaburagi
asked on 25 Apr 2014, 01:48 PM
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!
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!
2 Answers, 1 is accepted
0
Hello,
when tabbing through the items, the built-in browser scroll into view feature is activated, which by-passes the mobile view javascript based scroller and offsets the entire document. I think that you may workaround this (and several other problems) using native scrolling on the view level.
If this does not work (and you can work with the limitations implied), you may also try the application level native scrolling.
Regards,
Petyo
Telerik
when tabbing through the items, the built-in browser scroll into view feature is activated, which by-passes the mobile view javascript based scroller and offsets the entire document. I think that you may workaround this (and several other problems) using native scrolling on the view level.
If this does not work (and you can work with the limitations implied), you may also try the application level native scrolling.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shoji Kaburagi
Top achievements
Rank 1
Rank 1
answered on 28 Apr 2014, 02:20 PM
If I use data-use-native-scrolling="true", the header gets back at the top as soon as the keyboard disappears. Also, for IE 11, the header stays at the top. I did not see anything "flaky". This works for me.
Thanks for your help.
Thanks for your help.