Problem with Scroller and ListView

[Ron]

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

[Kiril Nikolov]

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

[Ron]

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

[Kiril Nikolov]

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

[Backtell]

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.

[Kiril Nikolov]

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