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

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

3 Answers 378 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
danparker276
Top achievements
Rank 2
danparker276 asked on 26 Jul 2014, 02:49 PM
          <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>

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 28 Jul 2014, 08:36 AM
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!
 
0
danparker276
Top achievements
Rank 2
answered on 28 Jul 2014, 03:06 PM
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.
0
danparker276
Top achievements
Rank 2
answered on 28 Jul 2014, 05:06 PM
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");
               }
            
          });
Tags
General Discussions
Asked by
danparker276
Top achievements
Rank 2
Answers by
Dimo
Telerik team
danparker276
Top achievements
Rank 2
Share this question
or