Kendo UI dropdownlist takes size of biggest option

Question

 var ddlViews = $('#ddlViews').data("kendoDropDownList");
        ddlViews.list.width("auto");

I have added width to be auto but its not working, also the width of the dropdown box gets the max width of the item selected and overflows out of the box. I want the dropdown box to have a fixed width, but the dropdown list items should show contents in single line. As the normal dropdown would work.

http://tinypic.com/r/2vt63pc/5 here is the screen where it doesn't work, any ideas would be greatly appreciated. — Raza, Jul 17 '13 at 06:48
ddlViews.list.width("auto"), what do you mean by the .list ? There is not such property on KendoDropdown. — Vojtiik, Jul 17 '13 at 13:22
// get reference to the DropDownList var dropdownlist = $("#size").data("kendoDropDownList"); // set width of the DropDownList dropdownlist.list.width(500); Check this link for more documentation http://www.kendoui.com/forums/kendo-ui-web/dropdownlist/dropdownlist-width-.aspx — Raza, Aug 14 '13 at 08:36

Arun Killu · Answer 1 · 2013-07-18T04:16:39.353

16

.k-list-container{
    min-width:126px !important;//give a min width of your choice
    width: auto!important;
}
.k-list
{
    width:auto !important;
}

dropdown

link to js fiddle

edited Jul 18 '13 at 04:16

answered Jul 18 '13 at 03:45

Arun Killu

13,581
5
34
61

the jsfiddle is missing an opening option tag before stack overflow option. – Atishay Feb 26 '14 at 10:12

score 5 · Answer 2 · answered Nov 19 '13 at 12:09

We can set width in 2 ways for Kendo UI combobox list width.

Answer-1 *For static way*

// get reference to the DropDownList
var dropdownlist = $("#size").data("kendoDropDownList");
// set width of the DropDownList
dropdownlist.list.width(500);

Answer -2 Dynamic way using css

    .k-list-container
    {
        white-space: nowrap !important;
        width: auto!important;
        overflow-x: hidden !important;
        min-width:243px !important;
    }

    .k-list
    {
        overflow-x: hidden !important;
        /*overflow-style: marquee;*/
        overflow-y: auto !important;
         width:auto !important;
    }

This above css code will work for in dynamic data load.

score 3 · Accepted Answer · answered Jul 19 '13 at 06:53

.k-dropdown {
    max-width:10em !important;
}

Add these to your CSS and it works, the width would be the max-width you want to specify so that the dropdown box is of this max-width, whereas the contents/items would be in a single line.

The !important property forcefully adds the style you would like to have. Also it does override the width calculated by kendo.

Thanks for answering.

Hope this helps ! Raza

score 1 · Answer 4 · edited May 23 '17 at 11:53

1

Follow this answer to set width on your Dropdownlist : Kendo dropdown width

.k-dropdown {
     width: 250px;
}

edited May 23 '17 at 11:53

Community

1
1

answered Jul 17 '13 at 13:24

Vojtiik

2,558
1
17
21

score 1 · Answer 5 · answered Aug 04 '17 at 08:46

kendo has now full support for that, with the autoWidth option

<input id="dropdownlist" style="width: 100px;" />
<script>
$("#dropdownlist").kendoDropDownList({
  autoWidth: true,
  dataSource: {
    data: ["Short item", "An item with really, really long text"]
  }
});
</script>

score 0 · Answer 6 · answered Jul 18 '13 at 03:40

To set dropdown box fixed width(for list only), use

 ddlViews.list.width(200);

To set fixed width for dropdown whether list is active or not, define width in css as

<select id="ddlViews"  style="width:200px;" >
    <option></option>
</select>

I was able to show option content in a single line through css as

ddlViews.list.css("white-space","nowrap");

Kendo UI dropdownlist takes size of biggest option

6 Answers6