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

3 posts, 0 answers
  1. Shoji Kaburagi
    Shoji Kaburagi avatar
    27 posts
    Member since:
    Jul 2012

    Posted 25 Apr 2014 Link to this post

    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. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 28 Apr 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Shoji Kaburagi
    Shoji Kaburagi avatar
    27 posts
    Member since:
    Jul 2012

    Posted 28 Apr 2014 in reply to Petyo Link to this post

    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.
Back to Top