Problem with Scroller and ListView

6 posts, 0 answers
  1. Ron
    Ron avatar
    14 posts
    Member since:
    Jan 2013

    Posted 13 Aug 2013 Link to this post

    Hi

    I discovered an issue when use a Scroller with ListView mobile control. The following example might help to better explain the problem.

    <div data-role="view" data-title="Test View" id="testView">
        <div>
            <input type="search" value="" id="searchfor" class="k-textbox" placeholder="Search..." />
        </div>
        <div data-role="scroller">
            <ul data-role="listview" id="customersListview" data-type="group"></ul>
        </div>
    </div>
    In this example there is a <div> area followed by the Scroller that contains a ListView control and list view items are populated in JavaScrip.
    If I try this as it is, when scroll the items in the list view it also scrolls the <div> above the scroller and pushes the Search box outside of the screen.
    The fix to this problem is to set a "Height" for the scroller but problem is that I want the list covers the rest of the screen on the device and height of the screen depends on the type of the device and I cannot specify a fixed height for the scroller that works on all types of the devices.
    Is there any way to have this working without setting a fixed height?

    Thanks
    Ron
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 14 Aug 2013 Link to this post

    Hello Ron,

    You can achieve this using CSS Flexboxes, so you can redistribute the content in the View. Please follow this link to see a possible implementation:

    http://jsbin.com/ebenuh/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. Ron
    Ron avatar
    14 posts
    Member since:
    Jan 2013

    Posted 18 Aug 2013 Link to this post

    Hi Kiril,

    Thank you for the answer. Although your solution works on PC browsers but I tried it on iPhone and Android phone and it doesn't work. On the mobile phones all the contents of the view scrolls together including the search and static text not only the ListView.
    Is there a solution that can work on mobile phones?

    Thanks
    Ron
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 20 Aug 2013 Link to this post

    Hi Ron,

    I have tested the example that I have sent you again on Android and iOS devices and it seems to be working as expected (search is not scrolling). What device do you use for testing, is it the same code or you have modified it?
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Backtell
    Backtell avatar
    5 posts
    Member since:
    May 2007

    Posted 21 Aug 2013 Link to this post

    Kiril, can a similar effect be achieved with only the kendo mobile libraries? I'm interested in getting the listview's filter to remain static at the top of the screen.

    EDIT: Nevermind. It seems that the data-stretch parameter must be true in order for the controls to be static. I hadn't specified and the search bar and static text at the bottom would just scroll along with the list.

    EDIT #2: aaaand it seems that turning on data-stretch disables the mobile scroller, which among other things makes pull-to-refresh and endless scrolling impossible. Probably going to look into embedding an element into the layout header definition and just keeping it hidden except on the pages it needs to be visible.
  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 23 Aug 2013 Link to this post

    Hello John,

    The flexbox approach is used in Kendo UI components as well, but you cannot achieve this using Kendo UI components only. But anyway flexbox is supported in all mobile browsers, so there should not be a problem using it. 

    As for that data-stretch - yes it disables the scrolling, but the idea behind the data-stretch is to make the view take the whole screen, which is useful if you have a map/picture inside for example. 

    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