How disable scrolling on a view

7 posts, 0 answers
  1. Tareq
    Tareq avatar
    2 posts
    Member since:
    Jun 2013

    Posted 16 Sep 2013 Link to this post

    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;
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 17 Sep 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Tareq
    Tareq avatar
    2 posts
    Member since:
    Jun 2013

    Posted 17 Sep 2013 Link to this post

    Thanks Kiril it worked perfectly. 
  5. Juan
    Juan avatar
    3 posts
    Member since:
    Nov 2013

    Posted 20 Feb 2014 in reply to Kiril Nikolov Link to this post

    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.
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 21 Feb 2014 Link to this post

    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!
  7. Juan
    Juan avatar
    3 posts
    Member since:
    Nov 2013

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

    I'm actually doing this with a listview... Is there a way to disable that?
  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 24 Feb 2014 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready