केंडो यूआई ड्रॉपडाउनलिस्ट सबसे बड़ा विकल्प

Question

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

मैंने ऑटो होने के लिए चौड़ाई जोड़ा है लेकिन यह काम नहीं कर रहा है, ड्रॉपडाउन बॉक्स की चौड़ाई भी चयनित आइटम की अधिकतम चौड़ाई और बॉक्स से बहती है। मैं ड्रॉपडाउन बॉक्स को निश्चित चौड़ाई रखना चाहता हूं, लेकिन ड्रॉपडाउन सूची आइटम को एकल पंक्ति में सामग्री दिखानी चाहिए। जैसा कि सामान्य ड्रॉपडाउन काम करेगा।

Answer 1

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

सीएसएस के माध्यम से एक पंक्ति में सामग्री अपने सीएसएस करने के लिए इन जोड़ें और यह काम करता है, चौड़ाई अधिकतम-चौड़ाई आप चाहते हैं होगा निर्दिष्ट करने के लिए कि ड्रॉपडाउन बॉक्स इस अधिकतम-चौड़ाई का है, जबकि सामग्री/आइटम एक ही पंक्ति में होंगे।

! महत्वपूर्ण संपत्ति बलपूर्वक उस शैली को जोड़ती है जिसे आप चाहते हैं। इसके अलावा यह केंडो द्वारा गणना की चौड़ाई को ओवरराइड करता है।

उत्तर देने के लिए धन्यवाद।

आशा है कि इससे मदद मिलती है! रजा

Answer 2

अपने DropDownList पर चौड़ाई सेट करने के लिए इस सवाल का जवाब का पालन करें: Kendo dropdown width

.k-dropdown { 
    width: 250px; 
} 

Answer 3

, ड्रॉपडाउन बॉक्स निश्चित चौड़ाई (केवल सूची के लिए) सेट करने के लिए उपयोग करें

ddlViews.list.width(200); 

लटकती कि क्या सूची के लिए निश्चित चौड़ाई सेट करने के लिए सक्रिय है या नहीं, सीएसएस में

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

मैं विकल्प दिखाने में सक्षम था के रूप में

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

हम केंडो यूआई कम्बोबॉक्स सूची चौड़ाई के लिए 2 तरीकों से चौड़ाई निर्धारित कर सकते हैं।

उत्तर -1 * स्थिर तरीका *

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

उत्तर -2 गतिशील रास्ता का उपयोग कर सीएसएस

.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; 
    } 

सीएसएस कोड ऊपर इस गतिशील डेटा में के लिए काम करेंगे के लिए भार।

Answer 6

केन्डो autoWidth विकल्प के साथ, कि अभी पूरा समर्थन प्राप्त

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