防止 kendo 下拉列表自动换行

Question

我有一个 KendoDropDownList 的例子jsFiddle

var ds = [
    {label:"External Causes of Morbidity, Mortality"},
    {label:"Cardiovascular"},
    {label:"Circulatory System Diseases"},
    {label:"Codes of Special Purposes"},
    {label:"Congenital Anomalies"},
    {label:"Digestive System Diseases"},
    {label:"Easr and Mastoid Process Disease"},
    {label:"Endocrine, Metabolic, Immunity"}];

$("#dropdownlist").kendoDropDownList({
    dataTextField: 'label',
    dataSource: ds    
});

var ddl = $("#dropdownlist").data('kendoDropDownList').list.width("auto");

如您所见，我将列表的宽度设置为 "auto"，但列表中的第一项仍然自动换行。我认为 "auto" 值导致 window 适合列表中最大项目的正确大小，或者我是否必须找出所需的正确宽度并对宽度进行硬编码以防止单词-包装？

Answer 1

您只需要告诉列表项不要换行并将宽度设置为自动即可：

$("#dropdownlist").kendoDropDownList({
    dataTextField: 'label',
    dataSource: ds,    
    dataBound: function(e) {
        e.sender.list.width("auto");
    }
});

.k-list-container .k-list .k-item
{
    padding-right: 25px;
    white-space: nowrap;
}

Updated FIDDLE

如果您更喜欢在代码中完成所有操作：

$("#dropdownlist").kendoDropDownList({
    dataTextField: 'label',
    dataSource: ds,    
    dataBound: function(e) {
        e.sender.list.width("auto").find("li").css({"white-space": "nowrap", "padding-right": "25px"});
    }
});

FIDDLE

注意：垂直滚动条的右边距 space。

防止 kendo 下拉列表自动换行

Preventing word-wrap for kendo dropdownlist

kendo-ui

kendo-asp.net-mvc