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

How disable scrolling on a view

6 Answers 702 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Tareq
Top achievements
Rank 1
Tareq asked on 16 Sep 2013, 08:18 AM
Hi, 

i have a view that is a special case and i dont want it to have scolling if the content of the view is longer than the viewport. 

its just a view with a header and footer and some content and its being wrapped by scrollwrapper. 

whats the best way to disable it, something like overflow:hidden;

6 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 17 Sep 2013, 08:21 AM
Hello Tareq,

To achieve this you can use the stretch option of the View. If set to true, the view will stretch its child contents to occupy the entire view, while disabling kinetic scrolling. Useful if the view contains an image or a map. Here is an example:

<div data-role="view" data-stretch="true">
  <div style="background: gray">This element will be stretched</div>
</div>
 
<script>
new kendo.mobile.Application();
</script>

Please check the following documentation article to get familiar with available configuration options of the Kendo UI Mobile View:

http://docs.kendoui.com/api/mobile/view
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tareq
Top achievements
Rank 1
answered on 17 Sep 2013, 10:16 PM
Thanks Kiril it worked perfectly. 
0
Juan
Top achievements
Rank 1
answered on 20 Feb 2014, 11:31 PM
Is there a way to set this programatically after the view has been initialized? This does exactly what I need, but I need to temporarily disable the scrolling and re-enable it later.
0
Kiril Nikolov
Telerik team
answered on 21 Feb 2014, 12:37 PM
Hi Juan,

Dynamically setting the data-stretch property of a view is not supported. However if you put your content inside of a Kendo UI Mobile scroller you can enable and disable it on demand. Please check the following example:

http://jsbin.com/kaxot/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!
0
Juan
Top achievements
Rank 1
answered on 21 Feb 2014, 06:50 PM
I'm actually doing this with a listview... Is there a way to disable that?
0
Kiril Nikolov
Telerik team
answered on 24 Feb 2014, 09:17 AM
Hello Juan,

You can do the same if you get a reference of the Kendo UI Scroller that is used by default with the ListView. Please check the following example (you need to click the "Toggle scroller" button in the header):

http://jsbin.com/nawun/1/edit1

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Tareq
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Tareq
Top achievements
Rank 1
Juan
Top achievements
Rank 1
Share this question
or