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

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

16 Answers 251 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
AppsWiz
Top achievements
Rank 1
AppsWiz asked on 02 Sep 2013, 01:45 AM
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

16 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 02 Sep 2013, 10:54 AM
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!
0
AppsWiz
Top achievements
Rank 1
answered on 02 Sep 2013, 11:07 PM
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.
0
Accepted
Petyo
Telerik team
answered on 04 Sep 2013, 11:31 AM
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!
0
AppsWiz
Top achievements
Rank 1
answered on 05 Sep 2013, 04:07 AM
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?
0
AppsWiz
Top achievements
Rank 1
answered on 06 Sep 2013, 04:39 AM
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.
0
Kiril Nikolov
Telerik team
answered on 06 Sep 2013, 01:23 PM
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!
0
Ron
Top achievements
Rank 1
Veteran
answered on 21 Nov 2013, 03:59 PM
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?
0
Petyo
Telerik team
answered on 25 Nov 2013, 09:38 AM
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!
0
Ron
Top achievements
Rank 1
Veteran
answered on 25 Nov 2013, 03:01 PM
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. 
0
Petyo
Telerik team
answered on 27 Nov 2013, 08:21 AM
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!
0
Ron
Top achievements
Rank 1
Veteran
answered on 27 Nov 2013, 09:52 AM
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.
0
Petyo
Telerik team
answered on 29 Nov 2013, 07:55 AM
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!
0
Ron
Top achievements
Rank 1
Veteran
answered on 03 Dec 2013, 07:57 AM
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.
0
Kiril Nikolov
Telerik team
answered on 04 Dec 2013, 12:03 PM
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!
0
Ron
Top achievements
Rank 1
Veteran
answered on 05 Dec 2013, 08:30 AM
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)
0
Kiril Nikolov
Telerik team
answered on 06 Dec 2013, 09:01 AM
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!
Tags
ListView (Mobile)
Asked by
AppsWiz
Top achievements
Rank 1
Answers by
Petyo
Telerik team
AppsWiz
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Ron
Top achievements
Rank 1
Veteran
Share this question
or