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

Error!

16 Answers 296 Views

ScrollView (Mobile)

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

16 Answers, 1 is accepted

answered on 11 Mar 2012, 12:17 AM

ScrollView.png

I think I'm experiencing the same issue as Michael with respect to "2. I can not get it to line up on the phone...."

See attached image, which is from your demo site. I'm using an HTC EVO 4G and simply scroll a few pictures to the right and they get out of line.

Will this be resolved in the formal release on the 22nd?

answered on 06 Apr 2012, 08:38 PM

Hi,

I'm evaluating Kendo UI Mobile at the moment and I'm also having trouble with the Scroll View demo on Android. I have a HTC Wildfire S with 320px width and I am able to scroll to the next image (the animation doesn't look right though). But then the blue indicator bar is 100% width and I can't scroll to anymore images.

Try this on a HTC Wildfire S (android 2.3.5) :

http://www.captainsjob.com/test/kendouimobile/examples/mobile/scrollview/index.html

I have a different problem on my Samsung Galaxy Tab with 600px width. I've set the width of .photo to 600px as suggested. The problem here is that I have really fiddle with the image to try and get it to scroll (a swipe and double tap does it) and when the image does change it doesn't animate properly and the blue bar is again 100% width.

Try this on a Samsung Galaxy Tab (GT-P1000, Android 2.3.3) :

http://www.captainsjob.com/test/kendouimobile/examples/mobile/scrollview/index-600.html

When you say "It is up to the widget user to specify and configure the content size in order to match the target device dimensions." does this translate to the .photo elements in the Scroll View example?

If my client code does have to set the width according to the device can you provide an example that works on different android devices please?

Works ok on my Ipod 3 IOS5 no matter what I set the width to. This seems to be an Android only issue.

Thanks
Gareth

answered on 09 Apr 2012, 10:45 AM

When I change the /examples/mobile/scrollview/index.html to use the cdn version of kendo.all.min.js it works perfectly.

The online demos use this js file and they work perfectly on my HTC Wildfire S. The examples that come with the KendoUI Mobile trial download use kendo.mobile.min.js and this causes the problem. I tried using the cdn version of kendo.mobile.min.js but it has the same problem. It only works when I use the cdn version of kendo.all.min.js which is the same file that your online demos use.

The fix
In the example html files replace

<script src="../../../js/kendo.mobile.min.js"></script>

with :

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>

Here's the original with the problem I described :

http://www.captainsjob.com/test/kendouimobile/examples/mobile/scrollview/index.html

Here's a version that uses the cdn :

http://www.captainsjob.com/test/kendouimobile/examples/mobile/scrollview/indexcdn.html

I'm glad it's working now KendoUI Mobile is looking brilliant.

Thanks
Gareth

ps: the examples already use the data-role="page" attribute and I can see the widths of the .photo divs change as I resize the window so there's no need to set the width anymore you are right.

answered on 07 Oct 2012, 12:22 AM

I ran into the offset problem as well with the scrollview. The first image in the scrollview was positioned correctly, then if you scrolled to the second image, it was off by 4px. The third image was off by 8px. After 10 images, it would be off by 40px and showing part of the previous image.

My problem was that I used a template to populate the scrollview, and the template rendered the pages like:
<div data-role="scrollview">
<div data-role="page">
...
</div>
<div data-role="page">
...
</div>
<div data-role="page">
...
</div>
<div data-role="page">
...
</div>
</div>

And there was actually 4px space between each page. So if the scrollview was 1680px wide, the offset of -1680 when viewing the second slide was inaccurate, the second slide actually started at -1684.

I finally found out that if I changed the template to take out the line breaks and tab formatting between pages, and rendered the scrollview like:
<div data-role="scrollview">
<div data-role="page">
...
</div><div data-role="page">
...
</div><div data-role="page">
...
</div><div data-role="page">
...
</div>
</div>

Then the offset problem when scrolling pages went away, the pages were the proper width and didn't have the 4px of space between them. Makes sense, but was time consuming nonetheless!