Scroll does not work when used along with a tabstrip

3 posts, 1 answers
  1. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 25 Apr Link to this post

    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. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    2087 posts

    Posted 26 Apr Link to this post

    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.
  3. devApps
    devApps avatar
    37 posts
    Member since:
    Dec 2015

    Posted 30 Apr in reply to Tsvetina Link to this post

    Thanks again for solving this issue.
Back to Top