css - Kendo UI Dropdown，使下拉面板比控件更宽

Question

在 Kendo UI Dropdown 中，是否可以使下拉面板比控件更宽？

Answer 1

另一种可能的方法：

var dropdownlist = $("#titles").data("kendoDropDownList");

// set width of the drop-down list
dropdownlist.list.width(400);

代码片段取自官方示例（链接）。

Answer 2

如果是id，则需要将 CSS 样式定义为：dropDownListdrop

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

用于覆盖 KendoUI 计算的宽度并将其设置为（在本例中）300px。

Answer 3

实际上，有一个命令：

$("#idOfMyDropDownList").data("kendoDropDownList").list.width("auto");

Answer 4

另一种可能的解决方案：

$("[data-role=dropdownlist]").each(function () {
  $(this).data("kendoDropDownList").list.width(300);
});

Answer 5

您可以在定义控件时直接设置：

.AutoWidth(true)

IE

@(Html.Kendo().DropDownList()
  .Name("ddl")
  .DataTextField("Text")
  .DataValueField("Value")
  .AutoWidth(true)
  .BindTo(Model.list))