Style help for .k-item or other .k classes

4 posts, 0 answers
  1. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 26 Jul 2014 Link to this post

              <style >
        .k-popup .k-item
       {
    font: 8px/1.8em bold Arial, Helvetica, sans-serif;
                        }
                    </style>
    So say I have 2 dropdowns, and I only want 1 of them to use the above for the dropdown list.  How would I style it?
     The 2 below are kendo dropdown lists
    <div id="dd1" class="dd1">
          <input id="color1"  value="1" />
        </div>
     
     
        <div id="dd2" class="dd2">
          <input id="color2"  value="1" />
        </div>
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Jul 2014 Link to this post

    Hello Dan,

    You can use the DropDownList's open event and apply a custom CSS class to be used in your CSS rule:

    http://demos.telerik.com/kendo-ui/dropdownlist/events

    http://docs.telerik.com/kendo-ui/api/web/dropdownlist#events-open

    function onOpen(e) {
        e.sender.list.addClass("myClass");
    }

    e.sender.list refers to the <div> element with the .k-popup class.

    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
  4. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 28 Jul 2014 in reply to Dimo Link to this post

    Ok, I was hoping I could just scope the style, for .k-popup or .k-item but that didn't seem to work.  That's sorta ugly to add that to every dropdown.
  5. danparker276
    danparker276 avatar
    389 posts
    Member since:
    Aug 2010

    Posted 28 Jul 2014 in reply to danparker276 Link to this post

    Ok, this this worked for me.  I'm guessing this is the best way to do it.

    .myClass .k-item{
          font: 8px/1.8em bold Arial, Helvetica, sans-serif;
          background-color: blue;
       
    }
     
              $("#color").kendoDropDownList({
                  dataTextField: "text",
                  dataValueField: "value",
                  dataSource: data,
                  index: 0,
                  change: onChange,
                  open: function(e) {
                      e.sender.list.addClass("myClass");
                   }
                
              });
Back to Top
Kendo UI is VS 2017 Ready