Kendo UI Dropdown，使下拉面板比控件更宽答案

【问题标题】：Kendo UI Dropdown, making the drop down panel wider than the controlKendo UI Dropdown，使下拉面板比控件更宽
【发布时间】：2012-12-17 05:10:48
【问题描述】：

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

【问题讨论】：

telerik.com/community/forums/silverlight/gridview/…

标签： css kendo-ui

【解决方案1】：

另一种可能的方法：

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

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

代码 sn-p 取自官方示例（link）。

【讨论】：

这对我很有帮助，谢谢你，sasheto。 dropdownlist.list.width(400); 使下拉面板的宽度与控制框本身的宽度不同。

【解决方案2】：

如果dropDownList的id是drop，则需要定义一个CSS样式为：

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

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

【讨论】：

尝试后，我有两个 cmets 供其他人阅读：我必须使用 #drop-list { width: 300px !important; }。在为列表创建新的 CSS 时，不要假设 Kendo 下拉列表是原始下拉列表（具有 drop id 的下拉列表）的 NEXT，因为它不是。在 Kendo 版本 2015.1.318 中，该列表似乎位于 HTML 文档的底部（在我最初绑定的 DIV 之外）。

【解决方案3】：

其实有一个命令：

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

【讨论】：

【解决方案4】：

另一种可能的解决方案：

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

【讨论】：

【解决方案5】：

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

.AutoWidth(true)

即

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

【讨论】：