剑道下拉宽度

Question

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

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

Answer 1

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

你可以做什么，是造型正确的类。 由于您希望知道下拉列表的位置，因此您可以指定选择器，使其不适用于所有下拉列表。

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

Answer 2

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

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

Answer 3

为了保持自动宽度由浏览器设置：

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

Answer 4

如果采用MVC剃刀的DropDownList HTML辅助/包装语法，那么你可以使用方法HtmlAttributes指定下拉列表的宽度等：

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

Answer 5

你也可以试试这个;

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

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

Answer 6

更好地与CSS

#div1 {  
    width: 250px; 
} 

做，而是将代码

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

Answer 7

这将工作100％，因为它已经为我工作努力，我尝试了上述解决方案，它没有为我工作，所以我发现这个我自己:)，我希望你们都从中受益

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