Input with Type "Number" disapears inside list

2 posts, 0 answers
  1. Timothy
    Timothy avatar
    2 posts
    Member since:
    Jul 2013

    Posted 25 Feb 2014 Link to this post

    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 

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 26 Feb 2014 Link to this post

    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!
Back to Top