kendo-ui - 剑道下拉宽度

Question

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

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

Answer 1

kendoDropDownList 的配置没有属性宽度。见这里：剑道文档

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

你也可以试试这个；

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

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

Answer 5

最好用 CSS 来做

#div1 {     
    width: 250px;
}

但将使用代码

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

Answer 6

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

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

Answer 7

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

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