Kendo dropdown width

问题:

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

回答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;
}

回答2:

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",
})

回答3:

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" })

回答4:

You can try this as well;

<script type="text/javascript">
  $(document).ready(function() {
    var kendoDropDown = $('#div1').data('kendoDropDownList');
    kendoDropDown.list.width(250);
  });
</script>

Further documentation can be found here in Telerik's official API reference.

回答5:

Better to do it with CSS

#div1 {     
    width: 250px;
}

But will work with code

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

回答6:

To keep the automatic width set by the browser:

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

回答7:

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