CSS classes for Date Input don't work inside the ListView

2 posts, 0 answers
  1. Ron
    Ron avatar
    14 posts
    Member since:
    Jan 2013

    Posted 27 Aug 2013 Link to this post

    Hi,

    I am trying to apply a CSS class to some of the input fields inside the list view but noticed that if I specify the input type such as Date the CSS classes don't work inside the ListView. Below is an example. you can try the full example at jsbin.com/aSExaVu/1/edit

    <form action="demo_form.asp">
     <ul data-role="listview" id="testListView">
      <li>
        Text: <input class="required">
      </li>
       <li>
        Date (class): <input type="date"  class="required">
      </li>
       <li>
        Date (style): <input type="date"  style="background:yellow">
      </li>
       <li>
        <input type="submit">
      </li>
     </ul>
    </form>
    </div>
     
    <style scoped>
      .required
      {
        background:yellow
      }
    </style>
    In this example the "required" css class is applied on first 2 input elements. The Text input shows the yellow background but Date input doens't.
    If I apply the yellow background style directly to Date input (3rd input) it works but ListView somehow blocks the CSS classes for Date input.
    If I move the same Date input outside of the <UL> tag it also works.

    Could you please let me know how can I apply CSS classes to input or select elements inside the ListView?

    Regards
    Ron Farko
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 27 Aug 2013 Link to this post

    Hi Ron Farko,

    The problem is caused by CSS specificty - there are built-in Kendo UI styles, which remove the background. You can either use "!important" inside the style declaration or use a stronger selector

    .required,
    .km-view .km-listview-wrapper .km-listview .required
    {
      background: yellow;
    }


    Regards,
    Dimo
    Telerik
    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
Back to Top