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

Problem with Scroller and ListView

5 Answers 189 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Ron asked on 14 Aug 2013, 03:32 AM
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

5 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 14 Aug 2013, 01:58 PM
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!
0
Ron
Top achievements
Rank 1
answered on 18 Aug 2013, 12:49 PM
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
0
Kiril Nikolov
Telerik team
answered on 20 Aug 2013, 11:47 AM
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!
0
Backtell
Top achievements
Rank 1
answered on 21 Aug 2013, 03:53 PM
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.
0
Kiril Nikolov
Telerik team
answered on 23 Aug 2013, 11:03 AM
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!
Tags
ListView (Mobile)
Asked by
Ron
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Ron
Top achievements
Rank 1
Backtell
Top achievements
Rank 1
Share this question
or