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

Posted 2023-05-07

【中文标题】Kendo UI Dropdown，使下拉面板比控件更宽

【英文标题】：Kendo UI Dropdown, making the drop down panel wider than the control

【发布时间】：2012-12-17 05:10:48

【问题描述】：

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

【问题讨论】：

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

【参考方案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))