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;
}
तुम सब करने की जरूरत है wideसवाल में ड्रॉपडाउन तत्व (ओं) के लिए वर्ग को जोड़ने के लिए है।
<select class="wide">
...
</select>
यहाँ एक jsfiddle उदाहरण है । उम्मीद है की यह मदद करेगा।
width: auto !important;
अपनी खुद की ड्रॉप डाउन सूची बनाना एक दर्द से अधिक है जो इसके लायक है। IE ड्रॉप डाउन काम करने के लिए आप कुछ जावास्क्रिप्ट का उपयोग कर सकते हैं।
यह YUI लाइब्रेरी के एक बिट का उपयोग करता है और IE चुनिंदा बक्से को ठीक करने के लिए एक विशेष विस्तार।
आपको निम्नलिखित को शामिल करना होगा और अपने <select>तत्वों को एक में लपेटना होगा<span class="select-box">
अपने पेज के बॉडी टैग से पहले इन्हें लगाएं:
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>
पोस्ट स्वीकृति संपादित करें:
आप YUI लाइब्रेरी और हैक कंट्रोल के बिना भी ऐसा कर सकते हैं। आप सभी को वास्तव में एक onmouseover = "this.style.width = 'auto'" onmouseout = "this.style. उपलब्धता = '100px'" (या जो कुछ भी आप चाहते हैं) का चयन तत्व पर रखना है। YUI नियंत्रण इसे अच्छा एनीमेशन देता है लेकिन यह आवश्यक नहीं है। यह कार्य jquery और अन्य पुस्तकालयों के साथ भी पूरा किया जा सकता है (हालाँकि, मुझे इसके लिए स्पष्ट दस्तावेज नहीं मिले हैं)
- संपादन में संशोधन:
IE को चुनिंदा नियंत्रणों के लिए ऑनमाउट के साथ एक समस्या है (यह चयन पर माउसओवर होने के विकल्पों पर माउसओवर पर विचार नहीं करता है)। इससे माउसआउट का उपयोग बहुत मुश्किल हो जाता है। पहला समाधान सबसे अच्छा है जो मैंने अब तक पाया है।
आप बस निम्नलिखित कोशिश कर सकते हैं ...
styleClass="someStyleWidth"
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}"
onblur="this.style.position='';this.style.width=''"
मैंने कोशिश की और यह मेरे लिए काम करता है। और कुछ नहीं चाहिए।
मैंने निम्नलिखित समाधान का उपयोग किया और यह ज्यादातर स्थितियों में अच्छा काम करता है।
<style>
select{width:100px}
</style>
<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
<option>One</option>
<option>Two - A long option that gets cut off in IE</option>
</select>
</html>नोट: $ .browser.msie को jquery की आवश्यकता होती है।
@ क्या आपको ब्लर ईवेंट हैंडलर भी जोड़ना होगा
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
$("#dropdown").blur(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});हालांकि, यह अभी भी केवल तत्वों के बजाय क्लिक पर चयन बॉक्स का विस्तार करेगा। (और यह IE6 में विफल लगता है, लेकिन क्रोम और IE7 में पूरी तरह से काम करता है)
IE6 / IE7 / IE8 में ऐसा करने का कोई तरीका नहीं है। नियंत्रण एप्लिकेशन द्वारा आकर्षित किया है और IE बस इसे इस तरह आकर्षित नहीं करता है। आपकी सबसे अच्छी शर्त यह है कि यदि आप ड्रॉप-डाउन एक चौड़ाई और दूसरी चौड़ाई को सूचीबद्ध करना चाहते हैं तो यह महत्वपूर्ण है कि आप साधारण HTML / CSS / JavaScript के माध्यम से अपना स्वयं का ड्रॉप-डाउन लागू करें।
यदि आप jQuery का उपयोग करते हैं तो इस IE का चयन करें चौड़ाई चौड़ाई चुनें:
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/
इस प्लगइन को लागू करने से इंटरनेट एक्सप्लोरर में चुनिंदा बॉक्स काम करने लगता है क्योंकि यह फ़ायरफ़ॉक्स, ओपेरा आदि में काम करेगा ताकि विकल्प तत्वों को निश्चित चौड़ाई के लुक और स्टाइल को खोए बिना पूरी चौड़ाई पर खुलने दिया जा सके। यह Internet Explorer 6 और 7 में चयनित बॉक्स पर पैडिंग और बॉर्डर के लिए समर्थन भी जोड़ता है।
JQuery में यह काफी अच्छी तरह से काम करता है। मान लें कि ड्रॉपडाउन में आईडी = "ड्रॉपडाउन" है।
$(document).ready(function(){
$("#dropdown").mousedown(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$(this).css("width","175px");
}
});
});यहाँ सबसे सरल उपाय है।
शुरू करने से पहले, मुझे आपको बताना चाहिए कि ड्रॉपडाउन चयन बॉक्स IE6 को छोड़कर लगभग सभी ब्राउज़रों में स्वचालित रूप से विस्तारित हो जाएगा। इसलिए, मैं एक ब्राउज़र चेक (यानी, IE6) करूंगा और केवल उस ब्राउज़र पर निम्नलिखित लिखूंगा। ये रहा। पहले ब्राउज़र की जाँच करें।
कोड जादुई रूप से ड्रॉपडाउन चयन बॉक्स का विस्तार करेगा। समाधान के साथ एकमात्र समस्या यह है कि ड्रॉपडाउन को 420px तक विस्तारित किया जाएगा, और क्योंकि अतिप्रवाह = छिपा हम विस्तारित ड्रॉपडाउन आकार को छिपा रहे हैं और इसे 170px के रूप में दिखा रहे हैं; इसलिए, ddl के दाईं ओर तीर छिपा होगा और उसे देखा नहीं जा सकता। लेकिन चयन बॉक्स को 420px तक विस्तारित किया जाएगा; जो कि हम वास्तव में चाहते हैं। बस अपने लिए नीचे दिए गए कोड को आज़माएं और यदि आपको यह पसंद है तो इसका उपयोग करें।
.ctrDropDown
{
width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:420px; <%-- this the width of the dropdown select box.--%>
}
<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>ऊपर IE6 CSS है। अन्य सभी ब्राउज़रों के लिए सामान्य सीएसएस नीचे जैसा होना चाहिए।
.ctrDropDown
{
width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
width:auto; <%-- this the width of the dropdown select box.--%>
}यदि आप एक सरल ड्रॉपडाउन और / या बिना किसी संक्रमण प्रभाव के साथ फ्लाईआउट मेनू चाहते हैं, तो CSS का उपयोग करें ... आप IE6 को समर्थन करने के लिए बाध्य कर सकते हैं: व्यवहार के साथ .htc फ़ाइल (css3hover?) का उपयोग कर सभी तत्व पर होवर करें (IE6 केवल संपत्ति) परिभाषित है? सशर्त रूप से संलग्न सीएसएस फ़ाइल।
इसे देखें .. यह सही नहीं है, लेकिन यह काम करता है और यह केवल IE के लिए है और एफएफ को प्रभावित नहीं करता है। मैं onmousedown के लिए नियमित जावास्क्रिप्ट का उपयोग केवल IE को ठीक करने के लिए करता हूं .. लेकिन jquery से msie का उपयोग onmousedown में भी किया जा सकता है .. मुख्य विचार "onchange" है और ब्लर पर सामान्य चयन बॉक्स को वापस लाने के लिए .. तय करें कि आप उन लोगों के लिए खुद की चौड़ाई हैं। मुझे 35% की जरूरत थी।
onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}"
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"ऊपर BalusC का उत्तर बहुत अच्छा काम करता है, लेकिन एक छोटी सी फिक्स है जिसे मैं जोड़ दूंगा अगर आपके ड्रॉपडाउन की सामग्री की आपके सीएसएस चयन में परिभाषित की तुलना में एक छोटी चौड़ाई है।
.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
if ($(this).width() < 300) // put your desired minwidth here
{
$(this).removeClass('expand');
}})यह कुछ ऐसा है जो अन्य लोगों के सामान से बिट्स ले रहा है।
$(document).ready(function () {
if (document.all) {
$('#<%=cboDisability.ClientID %>').mousedown(function () {
$('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
});
$('#<%=cboDisability.ClientID %>').blur(function () {
$(this).css({ 'width': '208px' });
});
$('#<%=cboDisability.ClientID %>').change(function () {
$('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
});
$('#<%=cboEthnicity.ClientID %>').mousedown(function () {
$('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
});
$('#<%=cboEthnicity.ClientID %>').blur(function () {
$(this).css({ 'width': '208px' });
});
$('#<%=cboEthnicity.ClientID %>').change(function () {
$('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
});
}
});जहां cboEthnicity और cboDisability विकल्प पाठ के साथ ड्रॉपडाउन हैं, स्वयं की चौड़ाई की तुलना में व्यापक है।
जैसा कि आप देख सकते हैं, l के पास निर्दिष्ट document.all है क्योंकि यह केवल IE में काम करता है। इसके अलावा, एल ने इस तरह से दिव्य तत्वों के भीतर की गिरावट को दूर किया:
<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>जब आपके ड्रॉपडाउन का विस्तार होता है, तो स्थान से बाहर जाने वाले अन्य तत्वों का ध्यान रखता है। यहाँ केवल नकारात्मक पक्ष यह है कि जब आप चयन कर रहे होते हैं, तो दृश्य-श्रव्य गायब हो जाता है, जैसे ही आपने चुना है।
आशा है कि यह किसी की मदद करता है।
यह ऐसा करने का सबसे अच्छा तरीका है:
select:focus{
min-width:165px;
width:auto;
z-index:9999999999;
position:absolute;
}यह बिल्कुल BalusC समाधान की तरह है। केवल यह आसान है। ;)
एक पूर्ण विकसित jQuery प्लगइन उपलब्ध है। यह गैर-ब्रेकिंग लेआउट और कीबोर्ड इंटरैक्शन का समर्थन करता है, डेमो पेज देखें: http://powerkiki.github.com/ie_expand_select_width/
अस्वीकरण: मैंने उस चीज़ को कोडित किया, स्वागत है
मेरे द्वारा सुधार किए गए बालूसीस के समाधान। भी उपयोग किया: ब्रैड रॉबर्टसन के यहाँ टिप्पणी ।
बस इसे एक .js में डालें, अपने इच्छित कोम्बो के लिए विस्तृत वर्ग का उपयोग करें और इसे एक आईडी देने के लिए फोर्ज न करें। फ़ंक्शन को ऑनलोड (या डॉक्यूमेंटरी या जो भी हो) में कॉल करें।
साधारण गधे के रूप में :)
यह कॉम्बो के लिए न्यूनतम चौड़ाई के रूप में परिभाषित चौड़ाई का उपयोग करेगा।
function fixIeCombos() {
if ($.browser.msie && $.browser.version < 9) {
var style = $('<style>select.expand { width: auto; }</style>');
$('html > head').append(style);
var defaultWidth = "200";
// get predefined combo's widths.
var widths = new Array();
$('select.wide').each(function() {
var width = $(this).width();
if (!width) {
width = defaultWidth;
}
widths[$(this).attr('id')] = width;
});
$('select.wide')
.bind('focus mouseover', function() {
// We're going to do the expansion only if the resultant size is bigger
// than the original size of the combo.
// In order to find out the resultant size, we first clon the combo as
// a hidden element, add to the dom, and then test the width.
var originalWidth = widths[$(this).attr('id')];
var $selectClone = $(this).clone();
$selectClone.addClass('expand').hide();
$(this).after( $selectClone );
var expandedWidth = $selectClone.width()
$selectClone.remove();
if (expandedWidth > originalWidth) {
$(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');
})
}
}अब तक एक नहीं है। IE8 के बारे में नहीं जानते लेकिन यह IE6 और IE7 में नहीं किया जा सकता है, जब तक कि आप जावास्क्रिप्ट के साथ अपनी स्वयं की ड्रॉपडाउन सूची कार्यक्षमता को लागू नहीं करते हैं। वेब पर इसे कैसे करना है, इसके उदाहरण हैं, हालांकि मुझे मौजूदा कार्यक्षमता को डुप्लिकेट करने में अधिक लाभ नहीं दिखता है।
हमारे पास एस्प पर एक ही चीज है: ड्रॉपडाउनलिस्ट:
फ़ायरफ़ॉक्स (3.0.5) में ड्रॉपडाउन ड्रॉपडाउन में सबसे लंबे आइटम की चौड़ाई है, जो 600 पिक्सेल की तरह चौड़ी है या ऐसा कुछ है।
यह IE6 के साथ काम करने लगता है और दूसरों को तोड़ने के लिए प्रकट नहीं होता है। दूसरी अच्छी बात यह है कि जैसे ही आप अपना ड्रॉप डाउन चयन बदलते हैं, यह मेनू को स्वचालित रूप से बदल देता है।
$(document).ready(function(){
$("#dropdown").mouseover(function(){
if($.browser.msie) {
$(this).css("width","auto");
}
});
$("#dropdown").change(function(){
if ($.browser.msie) {
$("#dropdown").trigger("mouseover");
}
});
});पहले सर्वश्रेष्ठ उत्तर में hedgerwow लिंक (YUI एनीमेशन वर्क-अराउंड) टूट गया है, मुझे लगता है कि डोमेन समाप्त हो गया है। मैंने समय समाप्त होने से पहले कोड की प्रतिलिपि बनाई, इसलिए आप इसे यहां पा सकते हैं (कोड का स्वामी मुझे बता सकता है कि क्या मैं फिर से अपलोड करके किसी कॉपीराइट का उल्लंघन कर रहा हूं)
उसी ब्लॉग पोस्ट पर मैंने YUI बटन मेनू का उपयोग करके सामान्य की तरह सटीक एक ही चयन तत्व बनाने के बारे में लिखा था। एक नज़र है और मुझे पता है अगर यह मदद करता है!
साई द्वारा पोस्ट किए गए समाधान के आधार पर , यह jQuery के साथ कैसे करना है।
$(document).ready(function() {
if ($.browser.msie) $('select.wide')
.bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
.bind('blur', function() { $(this).css({position:'static',width:''}); });
});मुझे लगा कि मैं अपनी टोपी रिंग में फेंक दूंगा। मैं एक सास एप्लिकेशन बनाता हूं और मेरे पास एक टेबल के अंदर एक चुनिंदा मेनू है। इस पद्धति ने काम किया, लेकिन इसने तालिका में सब कुछ तिरछा कर दिया।
onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"तो मैंने इसे बेहतर बनाने के लिए जो किया वह चुनिंदा को जेड-इंडेक्सड डिव के अंदर फेंक दिया गया।
<td valign="top" style="width:225px; overflow:hidden;">
<div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
<select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
<option value="0">All</option>
<!--More Options-->
</select>
</div>
</td>आईई, क्रोम, एफएफ और सफारी के सभी संस्करण में इसका परीक्षण किया गया
// जावास्क्रिप्ट कोड
<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
sel.style.width = '';
}
function contractSELECT(sel) {
sel.style.width = '100px';
}
// end hiding -->
</script>// HTML कोड
<select name="sideeffect" id="sideeffect" style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
<option value="0" selected="selected" readonly="readonly">Select</option>
<option value="1" >Apple</option>
<option value="2" >Orange + Banana + Grapes</option>मुझे इस मुद्दे के आसपास काम करना पड़ा है और एक बार IE6, 7 और 8 के लिए काम करने वाले एक पूर्ण और स्केलेबल समाधान के साथ आया था (और स्पष्ट रूप से अन्य ब्राउज़रों के साथ संगत)। मैंने इसके बारे में एक पूरा लेख यहीं लिखा है: http://www.edgeoftheworld.fr/wp/work/deal-with-fixed-sized-dropdown-lists-in-internet-explorer
सोचा था कि मैं इसे उन लोगों के लिए साझा करूंगा जो अभी भी इस समस्या में चल रहे हैं, क्योंकि उपरोक्त समाधानों में से कोई भी हर मामले में (मेरी राय में) काम नहीं करता है।
मैंने इन सभी समाधानों की कोशिश की और किसी ने भी मेरे लिए पूरी तरह से काम नहीं किया। मैंने ये ढूंढ निकाला
$(document).ready(function () {
var clicknum = 0;
$('.dropdown').click(
function() {
clicknum++;
if (clicknum == 2) {
clicknum = 0;
$(this).css('position', '');
$(this).css('width', '');
}
}).blur(
function() {
$(this).css('position', '');
$(this).css('width', '');
clicknum = 0;
}).focus(
function() {
$(this).css('position', 'relative');
$(this).css('width', 'auto');
}).mousedown(
function() {
$(this).css('position', 'relative');
$(this).css('width', 'auto');
});
})(jQuery);अपने html में प्रत्येक ड्रॉपडाउन में एक ड्रॉपडाउन वर्ग जोड़ना सुनिश्चित करें
यहाँ चाल विशेष क्लिक फ़ंक्शन का उपयोग कर रही है (मुझे यह पता चला कि हर बार ड्रॉपडाउनलिस्ट आइटम को jQuery के साथ चुना गया है )। यहाँ पर कई अन्य समाधान इवेंट हैंडलर परिवर्तन का उपयोग करते हैं, जो अच्छी तरह से काम करता है लेकिन ट्रिगर नहीं करेगा यदि उपयोगकर्ता उसी विकल्प का चयन करता है जो पहले चुना गया था।
अन्य समाधानों की तरह, फ़ोकस और मूसडाउन तब होता है जब उपयोगकर्ता ड्रॉपडाउन को फ़ोकस में डालता है, ब्लर तब होता है जब वे दूर जाते हैं।
आप इसमें किसी प्रकार के ब्राउज़र का पता लगाना भी बंद कर सकते हैं, इसलिए यह केवल प्रभाव डालता है। हालांकि यह अन्य ब्राउज़रों में बुरा नहीं लगता है