Combo box overflow not working on mobile

[Dimitar]

Hi Guys,

I seem to be encountering an issue with the combo box and autocomplete web controls.

When using it on desktop, it all works fine and as intended. However, when on a mobile device (both ios 6 and android 4.0) the combo box and autocomplete controls behave as if they have

overflow: visible;

set.

This means that if there are more than 8 results in either of these controls, the remaining elements display past the containing element (see attached image for a contrived example) and the control is effectively useless. This is a very difficult case to include a example project for as it only happens on mobile devices.

If anyone can give any advice, or has encountered this before it would be much appreciated.

Thanks,

[Alexander Valchev]

Hi Dimitar,

I opened the same demo on iPad (iOS 6) but did not manage to reproduce the behaviour. For your convenience I attached a screenshot.

Here are the steps which I took:

1. Open http://demos.kendoui.com/web/combobox/serverfiltering.html on iPad.
2. Click on the combo's arrow and wait for the popup to open.
3. The content does not overflow.

Could you please let me know what I am missing?

Regards,
Alexander Valchev
Telerik

[Dimitar]

Hi Alexander,

The kendo demos work fine on mobile devices, I was using them to show what happens in our environment.

I've checked our configuration thoroughly and even stripped back all our custom css and javascript but for some reason in our environment combo boxes and autocompletes overflow, is there anything you can think of that would cause this?

Thanks

[Alexander Valchev]

Hi Dimitar,

I am not sure what might be the cause of this issue (my assumption was custom styling).
Is it possible for you to isolate the behaviour in a sample project that includes only Kendo ComboBox, jQuery and standard HTML elements? In this way I would be able to examine your configuration in details and assist you further.
Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik

[Dimitar]

Hi Alexander,

We've done some work on isolating and reproducing the issue and it seems that when we dont use the "all.js" configuration it falls over.

I've attached a few images and html files to show our problem.

DropDownList_Custom.html uses the individual files as per the documentation image and the customise kendo ui images and reproduces our error on mobile devices consistently.

DropDownList_KendoAll.html includes everything and works fine (includes data.viz)
DropDownList_KendowWeb.html includes only the web elements and also works.

These are all based on the kendo.cdn script and style sheets so there is no customisation on any of the stylesheets or js. It seems that something is missing in the customisation that allows drop down lists, combo boxes and auto complete to render opened list elements correctly on mobile devices. We've tested the custom.html on iphone, samsung and windows phone and the dropdown list and the items overflow past the bottom of the list everytime.

Please advise on where to go from here, we would prefer not to use the "all" configuration as it considerably increases our payload.

Thanks,
Dimitar

[Alexander Valchev]

Hi Dimitar,

Based on the additional information that you provided I was able to track down the cause of the issue - Kendo UI Mobile scroller (which appears on mobile devices) and its dependencies are not included in the custom build nor in the JavaScript dependencies list.

We will log this as bug and will try to address it as soon as possible. Please accept my apology for the inconvenience caused.

Meanwhile, if you would like to use custom builds, please check manually the mobile > scroller component. In this way the widget will be able to initialize its scroll container correctly on mobile devices.

Regards,
Alexander Valchev
Telerik