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 -
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
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 {
background: none repeat scroll 0 0 transparent;
border: 0 none;
color: #385487;
font-size: 1.1rem;
min-width: 6em;
outline: 0 none;
padding: 0.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;
right: 0;
}
.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-appearance: none;
font-size: 1.2rem;
}
.km-ios, .km-ios .km-button {
font: bold 0.9rem HelveticaNeue,sans-serif;
}
Hopefully I am missing something simple as still very new here :)
Thanks
Matt