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

Input with Type "Number" disapears inside list

1 Answer 33 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Timothy
Top achievements
Rank 1
Timothy asked on 26 Feb 2014, 03:05 AM
I have a list template which contains an input box.  When that input box is untyped, it appears in the list.  However, when I give it a type of "number", the inputs disappeare from the list.  This seems to be due to the following kendo CSS rule:

.km-flat .km-list input[type=password], .km-flat .km-list input[type=search], .km-flat .km-list input[type=number],.km-flat .km-list input[type=tel], .km-flat .km-list input[type=url], .km-flat .km-list input[type=email], .km-flat .km-list input[type=month], .km-flat .km-list input[type=color], .km-flat .km-list input[type=week],.km-flat .km-list input[type=date], .km-flat .km-list input[type=time], .km-flat .km-list input[type=datetime],.km-flat .km-list input[type=datetime-local], .km-flat .km-list input[type=text]:not(.k-input), .km-flat .km-list select:not([multiple]), .km-flat .km-list .k-dropdown-wrap, .km-flat .km-list textarea
{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
font-size: 1.1rem;
color: #4c5356;
min-width: 6em;
border: 0;
padding: .4em;
outline: 0;
background: transparent;}

So this would seem to indicate that hiding number input boxes on Kendo's part is very deliberate, but I must say I don't get it.  Is there another part of Kendo that is supposed to replace the input fields that somehow didn't fire? Why would Kendo deliberately hide my input box?

Thanks,
Tim 

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 26 Feb 2014, 04:31 PM
Hello Timothy,

We set appearance: none to all the inputs inside a ListView in order to style them according to the theme. The Flat skin's inputs are styled similarly to the native iOS ones, which usually are blended with the ListView and have no background. You can wrap your inputs in labels, so that when the user clicks on the whole ListView row, the input is correctly focused. You can also add a placeholder attribute to your inputs if the labels are not enough. Additionally you can easily add a border and background to all inputs if you don't want to go with our default theme styling, like this:
.km-flat .km-list input[type=text],
.km-flat .km-list input[type=number],
...
{
    border: 1px solid lightgray;
    background: white;
}


Regards,
Kamen Bundev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Timothy
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or