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?

score 15 · Answer 1 · edited Mar 27 '18 at 07:27

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);

score 5 · Answer 2 · answered Apr 25 '14 at 14:23

The above answer didn't work for me. I have a the advantage of knowing that my dropdown is inside of a div.

<div class="myDivClass">
   <select id="myDropDown"><option>First</option><option>Second></option></select>
   <!--... other stuff in the div-->
<div>

I found that the span has the class k-dropdown so I added the CSS

.myDivClass span.k-dropdown {
  width: 300px
}

score 0 · Answer 3 · answered Aug 18 '14 at 20:03

What worked for me is to render an extra class on the base element:

<input .. class="ExtraLarge ..

Which produced:

<span style="" class="k-widget k-dropdown k-header ExtraLarge" ..

With this ExtraLarge class in place, this worked great in FireFox and Chrome:

span.k-dropdown.ExtraLarge
{
    width:400px;
}

score 0 · Answer 4 · answered Jun 22 '15 at 14:04

Using the following code to be the template of the kendo dropdownlist:

<div class="myDivClass">
<select id="myDropDown"><option>First</option><option>Second></option></select>
<!--... other stuff in the div-->
<div>

you will initiate the kendoDropDownList using jQuery as follows:

$("#myDropDown").kendoDropDownList().data("kendoDropDownList");

Now, to set this controller to take up the full width, what you have to do, is to set the width of the select element to 100%, or whatever is your desire. e.g.:

<select id="myDropDown" style="width: 100%"><option>First</option><option>Second></option></select>

OR, is a css file:

#myDropDown { width: 100% }

score 0 · Answer 5 · answered Jan 23 '17 at 13:03

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

#my-dropdown-list {
    width: auto !important;
    -moz-min-width: 120px;
    -ms-min-width: 120px;
    -o-min-width: 120px;
    -webkit-min-width: 120px;
    min-width: 120px;
    /*max-width: 210px;*/
}

Read the explanation below. http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/auto-adjust-the-width

Set kendo ui dropdownlist width

5 Answers5

Linked