Kendo UI dropdownlist prende dimensioni del più grande opzione

Question

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

ho aggiunto la larghezza di essere auto, ma la sua non funziona, anche la larghezza della casella a discesa ottiene la larghezza massima della voce selezionata e trabocca fuori dalla scatola. Voglio che la casella a discesa abbia una larghezza fissa, ma le voci dell'elenco a discesa dovrebbero mostrare i contenuti in una sola riga. Come il normale menu a discesa funzionerebbe.

Answer 1

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

Aggiungere questi al vostro CSS e funziona, la larghezza sarebbe il max-width vuoi per specificare in modo che la casella a discesa sia di questa larghezza massima, mentre i contenuti/elementi si trovino in una singola riga.

La proprietà! Important aggiunge con forza lo stile che si desidera avere. Inoltre, sovrascrive la larghezza calcolata dal kendo.

Grazie per la risposta.

Spero che questo aiuti! Raza

Answer 2

Seguire questa risposta per impostare la larghezza sul DropDownList: Kendo dropdown width

.k-dropdown { 
    width: 250px; 
} 

Answer 3

Per impostare la larghezza fissa casella a discesa (per la lista unica), utilizzare

ddlViews.list.width(200); 

Per impostare la larghezza fissa per discesa se la lista è attivo o meno, definisce la larghezza in css come

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

Sono stato in grado di mostrare l'opzione contenuti in un unico linea attraverso css come

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

Possiamo impostare la larghezza in 2 modi per la larghezza dell'elenco di combobox UI di Kendo.

Risposta-1 * Per staticamente *

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

risposta -2 modo dinamico usando 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; 
    } 

Questo precedente codice css funzionerà cui dati dinamici caricare.

Answer 6

kendo ha ora il supporto completo per questo, con l'opzione autoWidth

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