ComboBox CSS w/ Mobile

4 posts, 0 answers
  1. Jeff Fink
    Jeff Fink avatar
    5 posts
    Member since:
    Dec 2009

    Posted 07 Dec 2012 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Dec 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Jeff Fink
    Jeff Fink avatar
    5 posts
    Member since:
    Dec 2009

    Posted 11 Dec 2012 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 12 Dec 2012 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready