Chosen: शून्य-चौड़ाई की समस्या के लिए समाधान

#92 का डुप्लिकेट।

मुझे यह परिवर्तन फिक्स पर करना था:
अगर (/px/.test(this.form_field_jq.css("width"))){
this.f_width = this.form_field_jq.css("width").replace("px", "");
} अन्यथा {
this.f_width = this.form_field_jq.css ("चौड़ाई");
}
चूंकि this.form_field_jq.css("width"); अंत में px के साथ चौड़ाई लौटा रहा था

मेरे पास एक समाधान है, और यह मेरी परियोजना में अच्छा काम करता है:

this.f_width = this.form_field_jq.outerWidth (); // इस लाइन के तहत नीचे दिए गए कोड को Selected.jqeury.js पर जोड़ें

  if (this.f_width==0){ 
      var cloneObj= this.form_field_jq.clone();
      cloneObj.removeAttr('id');
      $(document.body).append(cloneObj);
      var w = cloneObj.width();
      cloneObj.remove();
      this.f_width=w;
  }

उम्मीद है कि यह किसी की मदद करता है, क्योंकि यह मेरी परियोजना में अच्छा काम करता है।

मैंने अभी निम्नलिखित सीएसएस नियम जोड़ा है:

.chosen-container
{
    width: 100% !important;
}

धन्यवाद फैबियोडुक! चुने हुए कंटेनर के लिए सीएसएस सेट करने से मेरी समस्या हल हो गई!

आपको वास्तव में सीएसएस में चौड़ाई निर्धारित करने की आवश्यकता नहीं है। जब आप चुना को प्रारंभ करते हैं तो आप इसे ठीक से कर सकते हैं।

$(".chosen-select").chosen({ width: '100%' }); // any acceptable CSS width will work

असल में, मैंने अपने चुने हुए तत्वों को उत्पन्न करने के लिए एक केओ बाध्यकारी हैंडलर बनाया है, और उनमें से सभी की 100% चौड़ाई नहीं है, इसलिए सीएसएस मेरे लिए जाने का तरीका है। भले ही मैं चौड़ाई को अपने बाध्यकारी हैंडलर में एक विकल्प के रूप में सेट कर सकता था।

धन्यवाद @fabioduque इसने मेरे लिए भी काम किया!

@pfiller , धन्यवाद! जिसने मेरी समस्या का समाधान किया।

ऐसा कभी-कभी क्यों होता है? :(

मैंने सीएसएस दृष्टिकोण का उपयोग किया, क्योंकि मैं उन सभी स्थानों को नहीं देखना चाहता था जिन्हें मैंने चुना था (और नए विचार बनाते समय अन्य डेवलपर्स को भी यही समस्या हो सकती है)। तो सीएसएस विश्व स्तर पर समस्या को ठीक करता है। धन्यवाद @fabioduque

मैं अपने वर्डप्रेस प्लगइन्स में से एक में सशर्त तर्क के साथ इस मुद्दे पर चल रहा था ... विशेष रूप से चौड़ाई 0px पर सेट होने के साथ ... init के बाद भी (जिसे मैं chosen:ready साथ चुने हुए फ़ील्ड को कतारबद्ध करता हूं, इसलिए यदि यह पहले से ही init है और मैं माता पिता div छिपाने) ... लेकिन वैसे भी, इस जब मेरे jQuery कोड रन निष्पादित करने से पहले माता-पिता dIV तत्व को दिखाने के लिए क्या मैं इसे ठीक करने के लिए प्रयोग किया जाता है chosen:updated

// This is the original select field
$field = $( '#' + field );

// This is the select field wrapper that I hide (just shown for reference)
$( '.fieldset-' + field ).show();

// Chosen container ID will be original select element ID + _chosen
var $chosen_container = $( '#' + field + '_chosen' );
if( $chosen_container && $chosen_container.width() === 0 ){
    $chosen_container.css( 'width', '100%' );
}

$field.trigger( 'chosen:updated' );

अगर किसी और को अभी भी यह समस्या हो रही है, तो जांचें कि आप $(.chosen-select").chosen() को कब कॉल कर रहे हैं। मेरे पास पेज लोड पर जावास्क्रिप्ट फ़ंक्शन कॉल की एक सूची थी, जब मैंने .chosen() कॉल को सूची के शीर्ष पर ले जाया तो यह चौड़ाई को ठीक से लागू करता था, और शून्य चौड़ाई नहीं। जिन कार्यों को मैंने ऊपर स्थानांतरित किया था, वे कुछ डेटा पुनर्प्राप्त कर रहे थे और बहुत सारे डोम ऑपरेशन कर रहे थे।

मेरे पास 2 खोज आइकन क्यों हैं, मैंने उपरोक्त दोनों समाधानों की कोशिश की-