Đặt danh sách thả xuống kendo ui width

Question

Tôi muốn sử dụng danh sách thả xuống kendo, có kích thước cố định vì bị giới hạn bởi các trường khác trong trang, nhưng khi nó hiển thị các mục thả xuống của danh sách, thả -xuống phải được thay đổi kích thước về độ dài tối đa của các mục. Sắp xếp chiều rộng cố định cho mục được hiển thị, nhưng chiều rộng tự động cho danh sách thả xuống. Giống như

|my choice |  <-- fixed width displayed on the page 

|next choice  | 
|previous choice | <-- dropdown area to select another item 
|dummy   | 

Điều này có thể thông qua CSS hoặc thuộc tính danh sách thả xuống được đặt qua jQuery không?

Answer 1

Bạn có thể đặt chiều rộng của Danh sách thả xuống cả bằng cách sử dụng CSS hoặc sử dụng một phương pháp.

Nếu id của bạn DropDownList là my-dropdown thì bạn nên viết:

• Sử dụng CSS

  # my-thả xuống danh sách { width: auto quan trọng; }

LƯU Ý: Chúng tôi đã nối -list với bản gốc id. "Quan trọng" là quan trọng vì bạn muốn ghi đè định nghĩa độ rộng ban đầu.

• Sử dụng một phương pháp

  $ ("# my-thả xuống") dữ liệu ("kendoDropDownList") list.width ("tự động")..;

Ngoài việc sử dụng "tự động" để nhận được chiều rộng tự động điều chỉnh theo văn bản, bạn có thể sử dụng một chiều rộng cố định:

#my-dropdown-list { 
    width: 300px !important; 
} 

hoặc

$("#my-dropdown").data("kendoDropDownList").list.width(300); 

Answer 2

Câu trả lời ở trên didn 't làm việc cho tôi. Tôi có lợi thế khi biết rằng trình đơn thả xuống của tôi nằm bên trong một div.

<div class="myDivClass"> 
    <select id="myDropDown"><option>First</option><option>Second></option></select> 
    <!--... other stuff in the div--> 
<div> 

tôi thấy rằng nhịp có lớp k-thả xuống vì vậy tôi thêm CSS

.myDivClass span.k-dropdown { 
    width: 300px 
} 

Answer 3

gì làm việc cho tôi là để render một lớp thêm vào các yếu tố cơ bản:

<input .. class="ExtraLarge .. 

Được sản xuất:

<span style="" class="k-widget k-dropdown k-header ExtraLarge" .. 

Với lớp này ExtraLarge tại chỗ, điều này làm việc rất lớn trong FireFox và Chrome:

span.k-dropdown.ExtraLarge 
{ 
    width:400px; 
} 

Answer 4

Sử dụng đoạn mã sau là mẫu của DropDownList kendo:

<div class="myDivClass"> 
<select id="myDropDown"><option>First</option><option>Second></option></select> 
<!--... other stuff in the div--> 
<div> 

bạn sẽ bắt đầu kendoDropDownList sử dụng jQuery như sau:

$("#myDropDown").kendoDropDownList().data("kendoDropDownList"); 

Bây giờ, để thiết lập bộ điều khiển này để chiếm toàn bộ chiều rộng, những gì bạn phải làm, là để thiết lập chiều rộng của yếu tố lựa chọn đến 100%, hoặc bất cứ điều gì mong muốn của bạn. ví dụ:

<select id="myDropDown" style="width: 100%"><option>First</option><option>Second></option></select> 

OR, là một file css:

#myDropDown { width: 100% } 

Answer 5

Nếu id của bạn DropDownList là my-thả xuống thì bạn nên viết:

#my-dropdown-list { 
    width: auto !important; 
    -moz-min-width: 120px; 
    -ms-min-width: 120px; 
    -o-min-width: 120px; 
    -webkit-min-width: 120px; 
    min-width: 120px; 
    /*max-width: 210px;*/ 
} 

đọc kỹ hướng dẫn . http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/auto-adjust-the-width