Set kendo ui dropdownlist width

Question

I would like to use a kendo drop-down list, which has a fixed size since is constrained by other fields in the page, but when it shows the drop-down items of the list, the drop-down area should resize to the maximum length of the items. Sort of fixed width for the item displayed, but auto width for the drop down list. Something like

|my choice |     <-- fixed width displayed on the page

|next choice     |
|previous choice |  <-- dropdown area to select another item
|dummy           |

Is this possible through CSS or drop-down list properties set through jQuery?

Answer 1

You can set the width of a DropDown List both using a CSS or using a method.

If the id of you DropDownList is my-dropdown then you should write:

• Using CSS

  #my-dropdown-list {
      width: auto !important;
  }
  

NOTE: We have appended -list to the original id. The "!important" is important since you want to overwrite original width definition.

• Using a method

  $("#my-dropdown").data("kendoDropDownList").list.width("auto");
  

In addition to use "auto" for getting the width automatically adjusted to the text, you can use a fixed width:

#my-dropdown-list {
    width: 300px !important;
}

or:

$("#my-dropdown").data("kendoDropDownList").list.width(300);