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”，但列表中的第一项仍然是自动换行。我认为“自动”值导致窗口适合列表中最大项目的正确大小，或者我是否必须找出所需的正确宽度并硬编码宽度以防止自动换行？

Answer 1

您只需告诉列表项不要包装文本以及将宽度设置为auto：

$("#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;
}

更新了 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

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

防止kendo下拉列表的自动换行

1 个答案: