Kendo dropdown width

Question

Hi can someone tell me how to set width for kendo dropdown? Here is my code sample and it is not working. Anything wrong in that?

$("#div1").kendoDropDownList({
    dataSource: items,
    dataTextField: "Name",
    dataValueField: "Id",
    Width : "250px"
});

Answer 1

The kendoDropDownList does not have a property width for it's configuration. See here: Kendo Docs

What you can do, is styling the correct class. Since you hopefully do know where your dropdown lies, you can specify the selector so it doesn't apply to all dropdowns.

#myContainer .k-dropdown {
     width: 250px;
}

Answer 2

If MVC Razor DropDownList HTML helper/wrapper syntax is applied, then you can use method HtmlAttributes to specify the width of dropdown list like:

 @(Html.Kendo().DropDownList()                                                            .Name("myDDL")
.HtmlAttributes(new { style="width:100px" })

Answer 3

Better to do it with CSS

#div1 {     
    width: 250px;
}

But will work with code

$("#div1").width(250).kendoDropDownList({
    dataSource: items,
    dataTextField: "Name",
   dataValueField: "Id",
})

Answer 4

This will work 100% as it has worked for me, I tried the above solution, it did not work for me so I found this on my own :), I hope you all benefit from this

#DivThatContainsTheDropdown .k-combobox{
width: 22em !important;
}

Answer 5

In case you have to give different width to different controls you can follow the below approach for giving the width to the specific control.

$("#div1").width(250).kendoDropDownList({
    dataSource: items,
    dataTextField: "Name",
    dataValueField: "Id",
})

Answer 6

To keep the automatic width set by the browser:

$("select").each(function () {
    $(this)
        .width($(this).width())
        .kendoDropDownList();
});