剑道下拉宽度答案

【问题标题】：Kendo dropdown width剑道下拉宽度
【发布时间】：2013-04-11 01:01:49
【问题描述】：

您好，谁能告诉我如何设置剑道下拉菜单的宽度？这是我的代码示例，它不起作用。有什么不对吗？

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

【问题讨论】：

由于我的回答对您不起作用，请向我们展示您的相关代码，即：JS（这是您拥有的）、CSS 和 HTML。另外，制作一个 jsFiddle。

标签： kendo-ui kendo-asp.net-mvc

【解决方案1】：

kendoDropDownList 的配置没有属性宽度。见这里：Kendo Docs

您可以做的是为正确的类设置样式。由于您希望确实知道下拉列表的位置，因此您可以指定选择器，使其不适用于所有下拉列表。

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

【讨论】：

当我尝试申请课程时，它正在申请所有下拉菜单
这不会改变下拉弹出框的宽度（即点击下拉框时打开的弹出框）
它还应该改变弹出窗口的宽度，如下所示：dojo.telerik.com/eXOce。这不适合你吗？也许会打开一个新问题！ :)

【解决方案2】：

如果您必须为不同的控件指定不同的宽度，您可以按照以下方法为特定控件指定宽度。

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

【讨论】：

【解决方案3】：

如果应用了 MVC Razor DropDownList HTML helper/wrapper 语法，那么您可以使用方法 HtmlAttributes 来指定下拉列表的宽度，例如：

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

【讨论】：

【解决方案4】：

你也可以试试这个；

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

更多文档可以在 Telerik 的官方 API 参考中找到 here。

【讨论】：

【解决方案5】：

最好用 CSS 来做

#div1 {     
    width: 250px;
}

但可以使用代码

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

【讨论】：

【解决方案6】：

保持浏览器设置的自动宽度：

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

【讨论】：

【解决方案7】：

这将 100% 有效，因为它对我有用，我尝试了上述解决方案，但它对我不起作用，所以我自己找到了这个 :)，我希望你们都能从中受益

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

【讨论】：