Error!

[Michael]

Hi,

I've been using the scrollView for displaying photos.  I really like it but 2 things have come up.

1. It bounces a lot it almost makes it not worth while, scrolling the window up and down.
2. I can not get it to line up on the phone.  ie. the first photo sits in the middle of the phone then when you move it to the next one, it's off center as you move to more and more photos it gets worst.

thanks

[Petyo]

Hi,

For the final release, the first problem you describe will be fixed. The scrollview "locks" the scroll in horizontal only mode, making the experience better - as the vertical view scroller won't be activated.

However, I am not sure if I fully understand the second problem you describe. Is it possible for you to provide a sample url, or an archive, where we can reproduce it? 

Greetings,
Petyo
the Telerik team

[Michael]

ok so when you play with the scrollview all of a sudden the 
-webkit-transform: translate3d(0px, 792794173578279400000px, 0px) 
GET REALLY HUGE!!!!!

[Petyo]

Hello,

This does not look right, indeed. Can you provide more concrete steps on how to reproduce it? Does this happen in our online demos? Which browser/platform do you use? 

All the best,
Petyo
the Telerik team

[Dan Cornish]

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?

[Petyo]

Hi Dan,

I suspect that the reason for this may be the device resolution and the demo itself. The demo is using images that match the width of the mobile device simulator - this may be less than the Evo 4G width.  

The ScrollVIew itself does not have the concept of separate pages - it just scrolls its contents. It is up to the widget user to specify and configure the content size in order to match the target device dimensions.

All the best,
Petyo
the Telerik team

[Dan Cornish]

Petyo,

Thanks for the explanation.  It now works correctly after adjusting the width.

Is there a way to problematically switch to a particular <div> in the ScrollView?  For example, if I have content sections 1 - 7, can I default the ScrollView to be on section 4 when the page loads?

[Petyo]

Hi,

Unfortunately, not yet. Such feature will be available in the final release.

Greetings,
Petyo
the Telerik team

[Gareth]

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

[Petyo]

Hi,

For the final release, we introduced a page data attribute, which eliminates the need for the developer to calculate or specify dimensions. Take a look at the documentation for more information. 

I tried to reproduce the problem on the url you have provided on a very similar device (Samsung Galaxy Note, Android 2.3.5), to no avail. Does the same thing occur on our online demos?

Regards,
Petyo
the Telerik team

[Gareth]

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.

[Petyo]

Hi,

Thanks for sharing your finding - this might turn out to be an issue with the packaging itself. I will examine that further. 

Your telerik points have been updated. 

All the best,
Petyo
the Telerik team

[Kevin Kembel]

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!

[untitled]

I have the same problem with online demo on Galaxy Note 2 with Chrome and stock browser.
There is a small offset to the left on first photo. Later the offset getting bigger but till the end offset becomes as on the first photo again.

[Petyo]

Hi Arnaldas,

Did you try the solution provided in the previous forum post (cleaning up the whitespace?). It has resolved this problem for our customers in every case we have had reported so far.

All the best,
Petyo
the Telerik team

[untitled]

Hi Petyo,

I'm talking about your online demo which I can't change :)
Also on Windows PC with latest Chrome browser I have the same problem on beta demo with Windows mobile simulator: http://demos.kendoui.com/beta/mobile/overview/index.html#overview-gallery

Chrome Version 24.0.1312.57 m
Windows 7 pro SP1

[Petyo]

Hello Arnaldas,

I checked the given URL on the latest chrome version, but could not notice anything wrong in styling/whitespace. Perhaps a screenshot with notes would help?

On a side note, I am not sure if the one item per page feature (available in this demo) is not what you are looking for.

Greetings,
Petyo
the Telerik team