IE ड्रॉपडाउन सूची चौड़ाई संशोधन

इंटरनेट एक्सप्लोरर में, ड्रॉपडाउन सूची इसके ड्रॉपबॉक्स की चौड़ाई को प्रतिबिंबित करती है, जबकि फ़ायरफ़ॉक्स में, यह अनुकूलित होती है यो विषय वस्तु। इस बाधा के कारण सबसे लंबे चयन को समायोजित करने के लिए ड्रॉपबॉक्स का विस्तार करना आवश्यक हो जाता है, जिसके परिणामस्वरूप सौंदर्य की दृष्टि से अप्रभावी वेब पेज बनता है।

विभिन्न चौड़ाई के लिए सीएसएस-आधारित समाधान

इस समस्या को दूर करने के लिए और सीएसएस का उपयोग करके ड्रॉपबॉक्स और ड्रॉपडाउन सूची के लिए अलग-अलग चौड़ाई की अनुमति दें, निम्नलिखित पर विचार करें:

नीचे उल्लिखित jQuery-आधारित विधि क्लिक सहित सभी कीबोर्ड और माउस घटनाओं को संभालती है:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

इस स्क्रिप्ट को निम्नलिखित सीएसएस के साथ संयोजित करें:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

आवश्यक ड्रॉपडाउन तत्वों में "विस्तृत" वर्ग जोड़कर, आप इन संशोधनों को लागू कर सकते हैं। उदाहरण के लिए:

    ...

इस jsfiddle में एक लाइव प्रदर्शन का अन्वेषण करें: [लिंक]