ScrollView Dynamic Height

4 posts, 1 answers
  1. Kerry
    Kerry avatar
    19 posts
    Member since:
    Jul 2013

    Posted 18 Jul 2014 Link to this post

    Is it possible to dynamically set the height of a ScrollView?

    I have a series ListViews inside a ScrollView and would like to set the height of the ScrollView to the height of the ListView.

    I have researched this and found it suggested to use  data-stretch=true on the view and data-content-height="100%" on the ScrollView.  When I do this and the ListView contains more items than will display on the screen, it does not scroll vertically.  Example:
    http://jsbin.com/fosoj/1/edit?html,output

    I can hard code a content height on the ScrollView but it may be larger than necessary and it allows the ListView to scroll off the top of the page.  Example:
    http://jsbin.com/hatib/1/edit?html,output

    I would appreciate any alternatives.

    Thanks,
    Kerry
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 21 Jul 2014 Link to this post

    Hello Kerry,

    In order for the ListView to scroll you will need to wrap it inside a Kendo UI Scroller (you need to set fixed height), so you will turn on the scrolling functionality in a stretched view. Please check the edited example and let me know if it helps:

    http://jsbin.com/rezise/1/edit

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Kerry
    Kerry avatar
    19 posts
    Member since:
    Jul 2013

    Posted 21 Jul 2014 in reply to Kiril Nikolov Link to this post

    That does help.  I noticed that when using a Scroller on the page it does not maintain the scroll position from one page to the next like it does when it is not using a Scroller.  In my real code the list is a series of times that when paging from one to the next they line up due to scroll position being maintained.  I tried to get the scroll position from the scroller when the page was changing but the scrollTop field of the scroller was always zero.  If I could get the scroll position, I think I could adjust the next page to the same scroll position using the scrollTo method.  Is it possible to get the scrollTop position for a scroller in a scrollviewChanging event?  Or is there a better way to maintain the scroll position using a scroller between scroll view pages?

    I have created a new example to make it easy to see where the scroll position is between pages:
    http://jsbin.com/gusup/1/edit?html,output

    Thanks,
    Kerry
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 22 Jul 2014 Link to this post

    Hello Kerry,

    In the jsBin that you provided the scroller maintains its position when changing between the ScrollView elements, so I am not really sure what is the problem that you are facing. Anyway - you can get the current scroll position using the scrollTop property of the Kendo UI Scroller:

    $('[data-role=scroller]').getKendoMobileScroller().scrollTop

    Then you can use the animatedScrollTo() method as explained in this documentation article:

    http://docs.telerik.com/kendo-ui/api/mobile/scroller#methods-animatedScrollTo

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready