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

Best Way to Optimize Scrollview for Different Devices?

1 Answer 20 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Michael Zeppieri
Top achievements
Rank 1
Michael Zeppieri asked on 10 Feb 2014, 06:22 PM
I've been exploring the use of a scrollview on the default page of our app. I'm trying to scale the image to 100% of the device width. This can easily be done, however, the height is the hang up. Either my image gets cut off and pager is behind the image if my data-content-height="" is set too low, or the pager appears too low in the screen. There has to be an easier way to do this. I have experimented with using @media queries, but it seems to be a bit quirky and to make it perfect for every device is a very intensive task. Is there a good example of how this is done out there?

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 12 Feb 2014, 04:37 PM
Hi Michael,

The ScrollView can be scaled to take the whole View's height and width by:

  • making the View stretched
  • placing the ScrollView element as a direct child of the View container.
  • setting the contentHeight to 100%

The pager is not visible due to a bug in the current version. This issue is logged and will be fixed in the Q1 2014 release.
As a temporary workaround I can suggest you to move the pager element (ol.km-pages) up by setting a negative margin-top through CSS rule.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ScrollView (Mobile)
Asked by
Michael Zeppieri
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or