防止剑道下拉列表的自动换行

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");

如您所见，我将列表的宽度设置为“自动”，但列表中的第一项仍然自动换行。我认为“自动”值导致窗口适合列表中最大项目的正确大小，还是我必须找出所需的正确宽度并对宽度进行硬编码以防止自动换行？

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;
}

更新的小提琴

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

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

小提琴

注意：右侧填充为垂直滚动条留出空间。