scrolling problem with kendoDropDownList on iOS app

4 posts, 0 answers
  1. Gary
    Gary avatar
    6 posts
    Member since:
    Nov 2016

    Posted 22 Jan Link to this post

    Hi,

    I'm having trouble troubleshooting an issue specific to iOS platforms (app, not mobile web) regarding dropdownlists. It scrolls perfectly fine on Android and Windows devices along with any device in the simulator. However, on iOS devices (iPhone 6s and iPad tested), the scrolling doesn't work. At times, constantly moving my finger up and down on the list will shift it slightly (as in, less than 1/2 a row's distance), but never consistently nor reliably responsive in matching my finger's movement as it would on android devices.

    I have made sure that kendo.mobile.scroller.min.js and kendo.touch.min.js are included (defined in kendo.all.min.js). I have also tried finding if there are scrollers inside the DropDownList ( $("#leaveType").data("kendoDropDownList").list.data("kendoMobileScroller") returns "undefined" ) interfering with the functionality and came up with nothing.

    Screenshot that shows how the area is rendered, is attached. Clicking on the top blue select button shows the dropdownlist.

    Below is the relevant code, which itself is inside a kendo view navigated to via a dashboard.

    $("#leaveType").kendoDropDownList({
                        dataSource: pageModel.get('leaveTypeDS'),
                        dataTextField: "Description",
                        dataValueField: "Leave_Code",
                        optionLabel: "--Select--",
                        optionLabelTemplate: '<span class="leaveType-option" onclick="debugger;">--Select--</span>',
                        valueTemplate: '<span class="leaveType-value">#:data.Description#</span>',
                        template: '<span class="applyLeave-dropdownList">#:data.Description#</span>',
                        valuePrimitive: true
                    });

    applied to the following:

    <input id="leaveType" data-bind="value: mainInfo.leaveType"  />

     

    Any help and/or insight is greatly appreciated. Thanks!

  2. Stefan
    Admin
    Stefan avatar
    671 posts

    Posted 25 Jan Link to this post

    Hello Gary,

    I made an example based on the provided code and the DropDown was scrolled as expected on iOS devices.

    Please check if the custom templates are not interfering with the scroll behavior.

    If the issue still occurs after the templates are removed, please provide the following:

    1) Fully runnable example reproducing the issue.
    2) The models and the iOS version of the devices used for testing.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Gary
    Gary avatar
    6 posts
    Member since:
    Nov 2016

    Posted 27 Jan in reply to Stefan Link to this post

    H Stefan,

    I tried removing the templates as you suggested and the scroll still isn't working. Overflow:scroll in general doesn't appear to be working. I had an area where I applied a CSS "overflow-y: scroll" and again it worked on our test android phone, but not on the iOS devices. I also double checked the iOS cordova preferences (config.xml) and made sure overscroll scrolling wasn't disabled.

    Regarding the runnable example, it would be hard to provide because of the server-side calls made to set the datamodel and its connection to data sources. If it helps, I tested with a locally created datasource based on http://demos.telerik.com/kendo-ui/dropdownlist/index just to make sure it wasn't a problem rooted in the datasource. That DropDownList wasn't scrollable either on iOS devices. The code is below.

    var listTestData = [
                            { text: "Black", value: "1" },
                            { text: "Orange", value: "2" },
                            { text: "Grey", value: "3" },
                            { text: "Blue", value: "4" },
                            { text: "Magenta", value: "5" },
                            { text: "Green", value: "6" },
                            { text: "Yellow", value: "7" },
                            { text: "Cyan", value: "8" },
                            { text: "Purple", value: "9" },
                            { text: "Red", value: "10" },
                            { text: "Teal", value: "11" },
                            { text: "Aqua", value: "12" }
                        ];
                    $('#leaveType').kendoDropDownList({
                        dataSource: listTestData,
                        dataTextField: "text",
                        dataValueField: "value",
                        index: 0,
                        animation: false,
                        valuePrimitive: true
                    });

     

    I'm also including the code for the containing view, in case that's relevant. The code is below.

    <div data-role="view" id="ApplyLvView" data-layout="drawer-layout" data-zoom="false"
             data-title="Leave" data-reload="true"
             data-use-native-scrolling="false" data-scroller='{"elastic": false}'
             style="height: 100% !important; overflow: scroll !important; overflow-x: hidden !important;"
             data-transition="none">

    As a workaround, I ended up replacing the DropDownList with a mobile ListView contained within a div with data-role="scroller", to which I then I wrapped in a div where I applied a slideIn fx to simulate the same functionality as the DropDownList. I had to apply similar scroller wrapping around all objects relying on "overflow:scroll" CSS as well. That seems to work so far.

    Here is the requested device info:

    iPhone 6s:

    • Model: MKR42LL/A
    • Version: 10.2 (14C92)

    iPad Air 2:

    • Model: MH182ZP/A
    • Version: 10.0.2 (14A456)
  4. Stefan
    Admin
    Stefan avatar
    671 posts

    Posted 31 Jan Link to this post

    Hello Gary,

    I'm glad to hear that you manage to find a workaround in this scenario.

    As the issue seems to be related to the iOS scrolling over which the Kendo UI team has no control.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top