ComboBox CSS w/ Mobile

[Jeff Fink]

My ComboBoxes are rendering a bit funky when I include the mobile.ios.min.css or mobile.all.min.css references. The right-hand portion of the control containing the arrow and click to activate and background styling seems to be missing until the combobox is opened.

http://digitalboon.net/temp/combobox.jpg

The combobox appears to have a class overridden within the mobile css. Is this normal behavior or are there classes I have to customize to get comboboxes to render correctly in our mobile application.

Thank you for your time,

Bron

[Dimo]

Hello Bron,

I can't open the linked screenshot, however, here is a simple test page, which works as expected. Can you modify it, so that the problem is reproduced?

http://jsfiddle.net/dimodi/9gCGr/

All the best,
Dimo
the Telerik team

[Jeff Fink]

My apologies I turned the server hosting that image off, it should be back up.

I've also (I beleive) narrowed the issue down:

http://jsfiddle.net/9gCGr/6/

In the above fiddle I found that putting a combobox inside an initialized ListView (inset or not) caused the comboboxes to lose the correct positioning of their right-hand arrow and background (until interacted with).

On a side note related to comboboxes, I've noticed that some mobile browsers interpret <select> elements with a special popup. On my droid it appears as a vertical listing of radiobuttons for each <option>. Is there an override that will let us continue to use the databinding features of the kendoui initialized combobox, but allow the mobile device to render as it normally would?

Thanks again for your time,

Bron

[Dimo]

Hi Bron,

Indeed, the ComboBox styling changes on purpose in a mobile application. However, I notice that the padding is not correct, which will be fixed in the next release. In the meantime you can use:

.km-ios .km-list .k-dropdown-wrap
{
    padding:.2em;
}

... which will override the current padding of 0.4em.


>> Is there an override that will let us continue to use the databinding features of the kendoui initialized combobox, but allow the mobile device to render as it normally would?

The Kendo UI web widgets do not support such a behavior. If you require a native look, the best way to achieve that is to use Kendo UI mobile widgets and generic HTML elements.

Regards,
Dimo
the Telerik team