Kendo UI DropDownList có kích thước tùy chọn lớn nhất

Question

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

Tôi đã thêm chiều rộng để được tự động nhưng nó không làm việc, cũng là chiều rộng của hộp thả xuống chọn chiều rộng tối đa của mục đã chọn và tràn ra khỏi hộp. Tôi muốn hộp thả xuống có chiều rộng cố định, nhưng các mục danh sách thả xuống sẽ hiển thị nội dung trong một dòng. Như trình đơn thả xuống bình thường sẽ hoạt động.

Answer 1

.k-dropdown { 
    max-width:10em !important; 
} 

Thêm những để CSS của bạn và nó hoạt động, chiều rộng sẽ là max-width bạn muốn để chỉ định để hộp thả xuống có chiều rộng tối đa này, trong khi nội dung/mục sẽ nằm trong một dòng.

Thuộc tính quan trọng này bổ sung thêm phong cách bạn muốn có. Ngoài ra nó không ghi đè chiều rộng tính bằng kendo.

Cảm ơn bạn đã trả lời.

Hy vọng điều này sẽ hữu ích! Raza

Answer 2

theo câu trả lời này để thiết lập chiều rộng trên DropDownList của bạn: Kendo dropdown width

.k-dropdown { 
    width: 250px; 
} 

Answer 3

Để thiết lập hộp thả xuống chiều rộng cố định (đối với chỉ danh sách), sử dụng

ddlViews.list.width(200); 

Để thiết lập chiều rộng cố định cho thả xuống dù danh sách đang hoạt động hay không, hãy xác định chiều rộng bằng css là

<select id="ddlViews" style="width:200px;" > 
    <option></option> 
</select> 

Tôi có thể hiển thị tùy chọn nội dung trong một dòng duy nhất thông qua css như

ddlViews.list.css("white-space","nowrap"); 

Answer 4

.k-list-container{ 
    min-width:126px !important;//give a min width of your choice 
    width: auto!important; 
} 
.k-list 
{ 
    width:auto !important; 
} 

link to js fiddle

Answer 5

Chúng tôi có thể đặt chiều rộng theo 2 cách cho chiều rộng danh sách combobox Kendo UI.

trả lời-1 * Đối với cách tĩnh *

// get reference to the DropDownList 
var dropdownlist = $("#size").data("kendoDropDownList"); 
// set width of the DropDownList 
dropdownlist.list.width(500); 

trả lời -2 động cách sử dụng css

.k-list-container 
    { 
     white-space: nowrap !important; 
     width: auto!important; 
     overflow-x: hidden !important; 
     min-width:243px !important; 
    } 

    .k-list 
    { 
     overflow-x: hidden !important; 
     /*overflow-style: marquee;*/ 
     overflow-y: auto !important; 
     width:auto !important; 
    } 

này trên mã css sẽ làm việc cho trong dữ liệu động tải.

Answer 6

kendo đã hỗ trợ tại đầy đủ cho rằng, với các tùy chọnautoWidth

<input id="dropdownlist" style="width: 100px;" /> 
<script> 
$("#dropdownlist").kendoDropDownList({ 
    autoWidth: true, 
    dataSource: { 
    data: ["Short item", "An item with really, really long text"] 
    } 
}); 
</script>