防止自动换行的剑道DROPDOWNLIST

我有一个KendoDropDownList jsFiddle 防止自动换行的剑道DROPDOWNLIST

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

一个例子正如你所看到的，我有名单的宽度设置为“自动”，但第一项在列表中仍然字处理包装。我认为“自动”值导致窗口符合列表中最大项目的正确大小，或者我必须找出所需的正确宽度并对宽度进行硬编码以防止文字包装？

来源

2015-10-20 ihatemash

看起来像某种错误。设置list.width（“auto”）不会扩大列表的宽度，但对于那个项目来说不够。如果你有Telerik的支持，你可能想把它们指向你的jsFiddle，看看他们说了些什么。 –

我没有在关于list.width（“auto”）的文档中看到任何内容 - 您是在哪里找到的？设置#dropdownlist元素的这个宽度会使其更宽，但我不确定自动方法。 –

我发现它[这里]（http://www.telerik.com/forums/dropdownlist-should-take-size-of-biggest-option）我也在使用它，它的作用大部分，但有一些物品包装的时间。 –

你只需要告诉listItems中不换行文本以及宽度设置为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

注：右叶填充用于垂直滚动条的空间。

来源

2015-10-21 19:03:13 ezanker

防止自动换行的剑道DROPDOWNLIST

回答

相关问题