javascript Kendo UI 下拉列表采用最大选项的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17692939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo UI dropdownlist takes size of biggest option
提问by Raza
var ddlViews = $('#ddlViews').data("kendoDropDownList");
ddlViews.list.width("auto");
I have added width to be auto but its not working, also the width of the dropdown box gets the max width of the item selected and overflows out of the box. I want the dropdown box to have a fixed width, but the dropdown list items should show contents in single line. As the normal dropdown would work.
我已将宽度添加为自动但它不起作用，下拉框的宽度也会获得所选项目的最大宽度并溢出框外。我希望下拉框具有固定宽度，但下拉列表项应以单行显示内容。因为正常的下拉列表会起作用。
采纳答案by Raza
.k-dropdown {
max-width:10em !important;
}
Add these to your CSS and it works, the width would be the max-width you want to specify so that the dropdown box is of this max-width, whereas the contents/items would be in a single line.
将这些添加到您的 CSS 并且它可以工作，宽度将是您要指定的最大宽度，以便下拉框具有此最大宽度，而内容/项目将在一行中。
The !important property forcefully adds the style you would like to have. Also it does override the width calculated by kendo.
!important 属性强行添加您想要的样式。它也确实覆盖了由剑道计算的宽度。
Thanks for answering.
谢谢回答。
Hope this helps ! Raza
希望这可以帮助 ！拉扎
回答by Arun Killu
.k-list-container{
min-width:126px !important;//give a min width of your choice
width: auto!important;
}
.k-list
{
width:auto !important;
}
回答by Praveen G
We can set width in 2 ways for Kendo UI combobox list width.
我们可以通过两种方式为 Kendo UI 组合框列表宽度设置宽度。
Answer-1*For static way*
答案 1*对于静态方式*
// get reference to the DropDownList
var dropdownlist = $("#size").data("kendoDropDownList");
// set width of the DropDownList
dropdownlist.list.width(500);
Answer -2 Dynamic wayusing css
回答 -2使用 css 的动态方式
.k-list-container
{
white-space: nowrap !important;
width: auto!important;
overflow-x: hidden !important;
min-width:243px !important;
}
.k-list
{
overflow-x: hidden !important;
/*overflow-style: marquee;*/
overflow-y: auto !important;
width:auto !important;
}
This above css code will work for in dynamic data load.
上面的 css 代码适用于动态数据加载。
回答by Vojtiik
Follow this answer to set width on your Dropdownlist : Kendo dropdown width
按照此答案设置下拉列表的宽度：Kendo dropdown width
.k-dropdown {
width: 250px;
}
回答by CMS
kendo has now full support for that, with the autoWidthoption
kendo现在完全支持它，带有autoWidth选项
<input id="dropdownlist" style="width: 100px;" />
<script>
$("#dropdownlist").kendoDropDownList({
autoWidth: true,
dataSource: {
data: ["Short item", "An item with really, really long text"]
}
});
</script>
回答by rafoo
To set dropdown box fixed width(for list only), use
要设置下拉框固定宽度（仅适用于列表），请使用
ddlViews.list.width(200);
To set fixed width for dropdown whether list is active or not, define width in css as
要为下拉列表设置固定宽度，无论列表是否处于活动状态，请将 css 中的宽度定义为
<select id="ddlViews" style="width:200px;" >
<option></option>
</select>
I was able to show option content in a single line through css as
我能够通过 css 在一行中显示选项内容
ddlViews.list.css("white-space","nowrap");
