Ustaw Kendo UI DropDownList szerokość

Question

Chciałbym skorzystać z listy kendo rozwijanej, która ma stały rozmiar, ponieważ jest ograniczony przez innych pól na stronie, ale kiedy pokazuje elementy rozwijanej listy, spadek -powierzchnia powinna zostać zmieniona do maksymalnej długości elementów. Sortuj stałą szerokość wyświetlanej pozycji, ale szerokość automatyczna dla rozwijanej listy. Coś

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

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

Jest to możliwe poprzez CSS lub rozwijanych przez właściwości setlistę jQuery?

Answer 1

Możesz ustawić szerokość listy upuszczenia za pomocą CSS lub używając metody.

Jeśli identyfikator z was DropDownList jest my-dropdown powinieneś napisać:

• pomocą CSS

  # my-rozwijana lista-{ width: auto ważne; }

UWAGA: Mamy dołączany -list do oryginalnego id. Ważność "! Important" jest ważna, ponieważ chcesz zastąpić oryginalną szerokość.

• Stosując metodę

  $ ("# my-rozwijana") danych ("kendoDropDownList") list.width ("auto")..;

Ponadto użycie „auto” dla uzyskania szerokość automatycznie dostosowywane do tekstu, można użyć stałej szerokości

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

lub

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

Answer 2

Powyższa odpowiedź nie zrobił Działają dla mnie. Mam tę przewagę, że wiem, że moje menu znajduje się w div.

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

okazało się, że rozpiętość ma klasy K-rozwijaną więc dodałem CSS

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

Answer 3

Co pracował dla mnie jest to, aby uczynić dodatkową klasę na elemencie bazowym:

<input .. class="ExtraLarge .. 

który produkował:

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

Z tej klasie extralarge w miejscu, to działał świetnie w Firefox i Chrome:

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

Answer 4

Korzystanie poniższy kod, żeby być szablon dropdownlist kendo:

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

można zainicjować kendoDropDownList przy użyciu jQuery w następujący sposób:

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

teraz, aby ustawić ten kontroler do podjęcia pełnej szerokości, co trzeba zrobić, to ustawić szerokość elementu select do 100%, lub co jest twoje pragnienie. np

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

OR, to plik css:

#myDropDown { width: 100% } 

Answer 5

Jeśli identyfikator z was DropDownList jest mój-rozwijana powinieneś napisać:

#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;*/ 
} 

Czytaj poniższego wyjaśnienia . http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/auto-adjust-the-width