This is a migrated thread and some comments may be shown as answers.

Lose Header When Many List Items and tab through to the bottom

2 Answers 18 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Shoji Kaburagi
Top achievements
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!

2 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 28 Apr 2014, 08:04 AM
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
 
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
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.
Tags
ListView (Mobile)
Asked by
Shoji Kaburagi
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Shoji Kaburagi
Top achievements
Rank 1
Share this question
or