Imposta la larghezza della lista a cascata di kendo ui

Question

Vorrei utilizzare un elenco a discesa di kendo, che ha una dimensione fissa poiché è vincolato da altri campi nella pagina, ma quando mostra gli elementi a discesa della lista, la caduta -area di ridimensionamento dovrebbe ridimensionare alla lunghezza massima degli articoli. Ordinamento di larghezza fissa per l'elemento visualizzato, ma larghezza automatica per l'elenco a discesa. Qualcosa come

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

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

Questo è possibile tramite CSS o discesa proprietà set list tramite jQuery?

Answer 1

È possibile impostare la larghezza di un elenco DropDown sia utilizzando un CSS che utilizzando un metodo.

se l'ID di voi DropDownList è my-dropdown allora si dovrebbe scrivere:

• Utilizzando i CSS

  # my-discesa-list { width: auto importante; }

NOTA: Abbiamo aggiunto -list all'originale id. Il "! Importante" è importante poiché si desidera sovrascrivere la definizione della larghezza originale.

• Utilizzando un metodo

  $ ("# my-discesa") dei dati ("kendoDropDownList") list.width ("auto")..;

Oltre a usare "auto" per ottenere la larghezza regolata automaticamente al testo, è possibile utilizzare una larghezza fissa:

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

o

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

Answer 2

La risposta di cui sopra didn lavora per me Ho il vantaggio di sapere che il mio menu a discesa è all'interno di un div.

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

ho scoperto che la durata ha la classe k-discesa così ho aggiunto il CSS

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

Answer 3

Quello che ha funzionato per me è quello di rendere un classe in più sull'elemento di base:

<input .. class="ExtraLarge .. 

che ha prodotto:

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

Con questa classe ExtraLarge a posto, questo funzionava benissimo in Firefox e Chrome:

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

Answer 4

utilizzando il seguente codice di essere il modello della dropdownlist kendo:

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

si avvierà la kendoDropDownList utilizzando jQuery come segue:

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

Ora, per impostare questo controller a prendere l'intera larghezza, quello che devi fare, è quello di impostare la larghezza dell'elemento di selezione al 100%, o qualsiasi altra cosa è il vostro desiderio. esempio:

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

O, è un file css:

#myDropDown { width: 100% } 

Answer 5

se l'ID di voi DropDownList è il mio-discesa allora si dovrebbe scrivere:

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

leggere la spiegazione qui sotto . http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/auto-adjust-the-width