防止自動換行的劍道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

回答

相關問題