Android Use Native Scrolling Display Issue on List VIew - Android 4.1.2

17 posts, 1 answers
  1. AppsWiz
    AppsWiz avatar
    15 posts
    Member since:
    Apr 2013

    Posted 01 Sep 2013 Link to this post

    When I run a listview with native scrolling enabled, and there is enough items to make it scroll, the containing ul element is twice as long as it normally should be on the SGS3 I am testing on running 4.1.2. Other devices I deploy to seems to not have this issue some running 4.2.

    I feel like it is related to the '-webkit-transform-origin' being set to something weird. The list looks fine, but when you click on an item it is almost like the clickable vertical area  is expanded by 2x. Its weird because it is visually rendered fine, but there is lots of extra white space below the list and the clickable areas of each list item doesn't correspond with the visual area, its much larger vertically than it would normally be and ends up shifting each clickable area downward.

    Running Kendo UI Complete v2013.2.716

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Sep 2013 Link to this post

    Hello Dennis,

    This is a weird issue, indeed. I tried to reproduce this in the following jsbin, achieving somewhat the opposite - the clickable area is mismatching the links, but somehow detecting the tap higher than the actual, depending on the scrolling offset. The problem is most likely caused by a certain CSS texture related rule (a -webkit-transform one). If possible, can you please share your case too, so that we can suggest a solution that will work with it reliably? Thank you in advance.

    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. AppsWiz
    AppsWiz avatar
    15 posts
    Member since:
    Apr 2013

    Posted 02 Sep 2013 Link to this post

    Currently in crunch time for a release, if you can provide an updated fix I can let you know if it fixes my issues. If I get a moment I will try to create a jsbin.
  5. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 04 Sep 2013 Link to this post

    Hello Dennis,

    After some fiddling, adding the following CSS rule resolved the problem, at least in my sample:

    <style>
          .km-android .km-listview-wrapper {
              -webkit-transform: none !important;
          }
      </style>

    Please give that a try and let me know if it helps in your case, too. It should not have any adverse effects in general. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. AppsWiz
    AppsWiz avatar
    15 posts
    Member since:
    Apr 2013

    Posted 04 Sep 2013 Link to this post

    This has not solved my issue. Looking forward to any other possible solutions. Still looking for some time to get this to work.

    Also are you having use native scroller set on the view it is enclosed in?
  7. AppsWiz
    AppsWiz avatar
    15 posts
    Member since:
    Apr 2013

    Posted 05 Sep 2013 Link to this post

    Edit my previous post, we had a caching issue with the css build system and now it is fixed. When we comment out that line it breaks again.

    So is working for us now. Now if we can just get the scrolling in the app to be as smooth as regular web page scrolling. Any insight on to why simple lists with no images scroll jerky when a website with tons of images scrolls smoother? Also when will this be included in an internal release?

    Looking forward to the progress that Kendo is making every release.
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 06 Sep 2013 Link to this post

    Hi Dennis,

    I am glad to inform you that support for page scrolling is coming with the next release of the Kendo UI. It is scheduled for the middle of November, so stay tuned.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 21 Nov 2013 Link to this post

    Hi,

    We have the same issue, and we tried it with the newly released version of kendo, phonegap 3.1.0 + android 4.3 - and the problem still exists.

    Any ideas how to solve this?
  10. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 25 Nov 2013 Link to this post

    Hi Ron,

    This thread mentions multiple issues, so I am not sure which one you refer to. The last reply from Kiril was mentioning the native scrolling per application level, documented here. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 25 Nov 2013 Link to this post

    Hi,

    The item we discuss is the original one sent by AppsWiz:

    I our case we use the mobile list view, with endless scrolling, in Andriod we see that the header of our pane (data-role=header) sits on the same place where the list items start, so if we click on the 3rd item from the top, it behaves as if we clicked on the 1st item, an additional issue we have is that if we try to swipe after selecting a record, we can see the scroller on the side move, but the records themselves stay put, this works just fine in ios and Chrome, and if we remove endless scrolling, everything works fine in Android as well. 
  12. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 27 Nov 2013 Link to this post

    Hi Ron,

    I tried to reproduce the problem you describe (items not moving, etc) on our online demo – it seems to work as expected. Can you give it a try? 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 27 Nov 2013 Link to this post

    Petyo,

    Thanks, this example is not representative, the app does not have a header nor does it do anything with click events on the items in the list.

    The issue is specifically with an app that has a data-role=header above the list view, and that we can response to click events on items in the list.

    Ron.
  14. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 29 Nov 2013 Link to this post

    Hello Ron,

    in the following example, clicking the list item leads to a detail page. Header and footer are present. I tested it on Android 4.1.2 device (Nexus), it seemed to work as expected. Obviously, I am missing something. Can you please modify the jsbin, so that we can re-create the problem on our side? Thank you in advance. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 03 Dec 2013 Link to this post

    We tried the sample on Android 4.3, used on a Nexus 7 - and as you can see, we do not see any header there, so I am still at a loss how this applies to our situation.

    The header clearly appears in Chrome, but once we are on the device, it is not there, where in our code, the header is visible even during Android runtime. 

    As mentioned before, the exact same code for us looks right and works right on ios.
  16. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 04 Dec 2013 Link to this post

    Hi Dennis,

    Could you please test the following example?

    http://jsbin.com/opopOxI/5/edit

    Please let me know if you have any further questions.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  17. Ron
    Ron avatar
    122 posts
    Member since:
    Sep 2011

    Posted 05 Dec 2013 Link to this post

    Thanks for the sample. It is pretty clear from your own sample that Android is wrong, the header and footer are in the wrong place and maybe this will help you see the issues.

    Please see the samples from ios (iphone 5s with ios7) and android (nexus 7 with Android 4.4)
  18. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 06 Dec 2013 Link to this post

    Hi Dennis,

    Following the design principles suggested by the vendors of the mentioned platforms the header and the footer are displayed differently in iOS and Android. You can also see this in our demos where you can switch between different platforms and see how the header and footer are displayed on Android and the other operating systems. 

    If you need have any further questions, please do not hesitate to contact us.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready