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

ComboBox CSS w/ Mobile

3 Answers 167 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Jeff Fink
Top achievements
Rank 1
Jeff Fink asked on 07 Dec 2012, 08:22 PM
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

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 11 Dec 2012, 02:59 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeff Fink
Top achievements
Rank 1
answered on 11 Dec 2012, 08:59 PM
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
0
Dimo
Telerik team
answered on 12 Dec 2012, 09:19 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ComboBox
Asked by
Jeff Fink
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Jeff Fink
Top achievements
Rank 1
Share this question
or