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

Using standard INPUT with Kendo Mobile Style

4 Answers 339 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 06 Apr 2012, 03:53 PM
Hi,

I am trying to use standard input controls such as type=text and the standard select drop downlist with kendo mobile and the default styles seem to place them in various non in-line places (i.e. text box over on right of screen down a bit and no outline etc), what is my best practice?

e.g. in a standard view div (I have also tried putting this into a listview li to see if it helps)

<div id="amountdiv">
                    Enter Amount :
                    <input type="text" id="amounttextbox" value="testing" /><a href="" data-role="button"
                        data-click="amounttextbox_click" data-icon="add">Save</a>
</div>

Do I have to sit down and work out how the mobile UI CSS is applied for each input and override them for each case?

Some of the output from firebug is -

.km-ios input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), .km-ios select:not([multiple]), .km-ios .k-dropdown-wrap {
    backgroundnone repeat scroll 0 0 transparent;
    border0 none;
    color#385487;
    font-size1.1rem;
    min-width6em;
    outline0 none;
    padding0.4em;
}

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), .km-root select:not([multiple]), .km-root .k-dropdown {
    margin-top-0.95em;
    right0;
}

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]), .km-root select:not([multiple]), .km-root .k-dropdown {
    -moz-appearancenone;
    font-size1.2rem;
}

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), .km-root select:not([multiple]), .km-root .k-dropdown {
    line-heightnormal;
    margin-top-0.5em;
    positionabsolute;
    right0.8em;
    top50%;
    z-index1;
}

.km-root input {
    -moz-user-selecttext;
}

.km-root * {
}

.km-ios, .km-ios .km-button {
    fontbold 0.9rem HelveticaNeue,sans-serif;
}

Or do I have to wrap them in a certain Mobile UI container or should I be using the Web UI Suite in conjunction with mobile somehow?

Hopefully I am missing something simple as still very new here :)

Thanks
Matt

4 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 09 Apr 2012, 09:53 AM
Hello Matthew,

This was a bug we missed in the release. The input elements in iOS are supposed to go in a list view, but we didn't constrain the styles to affect them only in list views and this broke the input elements outside. This is now fixed, you can download the latest internal build or use the styles posted by Dimo in this thread. Additionally select elements have a very buggy behavior in Android, you can use the Kendo UI DropDownList instead (it has special styling when used in Mobile).

Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 09 Apr 2012, 01:27 PM

Hi Kamen,

Thanks for that, was messing about overriding the select styles last night and got it "working", but much prefer it out of the box :)

1. For my future reference? where do I get the internal build from?

As an aside, I have applied the new "styles.rar" from your link to my code and the input textbox is now fine, but the "select" still "seems" to have position : absolute etc issues, could you confirm that this is definetly fixed and I will double check my code, but this leads me onto your helpful suggestion of using the dropdown from Kendo UI which I would definetly like to do as I will be releasing this with phonegap on IOS and Android hopefully ...

2 Could you point me to an example of what to "include" in order to add certain functionality to my mobile app.

In this first instance I want to just add the Kendo Web UI dropdownlist, my current links are as per standard -

<script src="js/jquery.min.js" type="text/javascript"></script>

 

<script src="js/kendo.mobile.min.js" type="text/javascript"></script>

 

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

Many Thanks
Matt

 

0
Accepted
Kamen Bundev
Telerik team
answered on 11 Apr 2012, 03:55 PM
Hi Matthew,

Selects should also be fixed in that CSS, there were further fixes in the next internal build, but not for position: absolute. You can download the internal builds for the products you purchased from you account in the Kendo UI site.

To include the Kendo DropDownList in your project you will need the following files in this order:
kendo.mobile.min.js (which includes kendo.core, kendo.fx and kendo.data, needed by the DropDownList)
kendo.popup.min.js
kendo.list.min.js
kendo.dropdownlist.js


You can check the Forms example as to what to expect form the DropDownList on the device and how to initialize it.

Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 12 Apr 2012, 09:03 AM
Thanks Kamen,

Your link to the forms demo was very helpful, did not see it hidden away in the "application" section of the demos! and this explains the RHS / no border "dropdown?" style I am seeing, so all is fine and will move on with mix and match of elements :)



Tags
General Discussions
Asked by
Matt
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Matt
Top achievements
Rank 1
Share this question
or