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

Scroll does not work when used along with a tabstrip

2 Answers 210 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
devApps
Top achievements
Rank 1
devApps asked on 25 Apr 2017, 05:53 AM

Dear Team ,

Here is a dojo where I have a simple scroll view working fine

Basic Scroll View Working Fine :http://dojo.telerik.com/OfUbI

When I use the scroll view along with a tabstrip ,the scroll does not work, it does not even show the pager

Scroll Not working with tabstrip : http://dojo.telerik.com/uDeZO/3

Another Issue I have is that when I have multiple images of different sizes in the scroll-view the scroll-view takes the height of the largest image.

Is there any way that this can be made dynamic such that the pager appears directly below the image with small size without leaving blank space in between ?

Or can the smaller images be automatically resized to fit the height of the largest image of the scroll view

Here is the sample for the same : Scroll with different size images

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetina
Telerik team
answered on 26 Apr 2017, 02:12 PM
Hello,

The first problem happens because the ScrollView has an initial setting of display:none and the pager size and position cannot be correctly calculated. You can call the ScrollView refresh method when you make the widget visible, to allow it to correctly size.

You can see the modified Dojo here:
http://dojo.telerik.com/@tsveti/oYOlU

With regard to sizing the ScollView, you can only set it a fixed content size in your scenario, using the contentHeight property. However, this will not resize the images. The actual image height depend on the img elements settings. You can set a hard-coded height and each image will scale to fit inside it:
http://dojo.telerik.com/@tsveti/efUCi

Another option is to set a max-height for the images using CSS and apply the same number as ScrollView content height. In this way smaller images will not be resized:
http://dojo.telerik.com/@tsveti/ejuca/2

Regards,
Tsvetina
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
devApps
Top achievements
Rank 1
answered on 30 Apr 2017, 05:24 AM
Thanks again for solving this issue.
Tags
ScrollView (Mobile)
Asked by
devApps
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
devApps
Top achievements
Rank 1
Share this question
or