ScrollView Dynamic Height

[Kerry]

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

[Kiril Nikolov]

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

 

 

[Kerry]

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

[Kiril Nikolov]

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