Chosen: यदि चयन प्रारंभ में छिपा हुआ है, तो काम नहीं करता

हां, आपको कॉफी स्क्रिप्ट को पैच करना चाहिए। इसके अलावा मैं छिपे हुए तत्वों को स्थापित करने की क्षमता के लिए हूं।

+1 आज इस मुद्दे में भाग गया

+1 जैसा मैंने किया था

वैकल्पिक हल के रूप में, आप !important ध्वज के साथ निर्मित div की चौड़ाई निर्धारित कर सकते हैं:

#my_select_chzn {
  width: 100% !important;
}

दरअसल, यह आपको उस जगह के करीब ले जाएगा जहां आपको होना चाहिए। चौड़ाई सही नहीं है, लेकिन सब कुछ दिखाई देगा।

#my_select_chzn {
  /* This is the only width setting you'll need to change. */
  width: 100% !important;
}
#my_select_chzn .chzn-drop {
  width: 100% !important;
}
#my_select_chzn .chzn-drop .chzn-search {
  width: 99% !important;
}
#web_template_exploit_name_chzn .chzn-drop .chzn-search input {
  width: 98% !important;
}

चुना का एक पुराना संस्करण वास्तव में यह देखने के लिए परीक्षण किया गया था कि फॉर्म फ़ील्ड चौड़ाई सीएसएस के माध्यम से सेट की गई थी या नहीं। यदि ऐसा है, तो उसने चौड़ाई गणना का उपयोग नहीं किया। मुझे लगता है कि मैं छिपे हुए तत्वों के परीक्षण के लिए कोड की 30 पंक्तियों को जोड़ने के लिए फिक्स की इस विधि को पसंद करता हूं। क्या ऐसा कुछ आपके लिए काम करेगा?

चौड़ाई निर्धारित करें:

  <select style="width:350px;" class="chzn-select">

पहले सेट चौड़ाई के लिए जे एस परीक्षण:

  <strong i="10">@f_width</strong> = if @form_field_jq.css('width')? then parseInt(@form_field_jq.css('width'),10) else @form_field_jq.width()

@pfiller आपके कोड में एक छोटी सी बग है। यदि इनलाइन शैली की पिक्सेल के अलावा किसी अन्य इकाई में चौड़ाई है (जैसे em) तो कोड इसे पिक्सेल के रूप में व्याख्यायित करेगा। चयनित .

मुझे लगता है कि लोग इसके बारे में लगातार शिकायत करेंगे और आपको अंततः कोड की 30 पंक्तियों को जोड़ना होगा।

हाय @pfiller , यह काम नहीं करता है। चौड़ाई () और सीएसएस ("चौड़ाई") दोनों छिपे हुए तत्वों के लिए 0 लौटाते हैं। मैं getHiddenDimensions तकनीक का उपयोग कर रहा हूं और यह अच्छी तरह से काम कर रहा है।

बीटीडब्ल्यू, आपको इसे f_width और get_side_border_padding दोनों में उपयोग करने की आवश्यकता है

इसके लिए +1।

जिस साइट पर मैं एकीकृत कर रहा हूं उस पर बहुत सारे तर्क पहले लोड पर छिपे हुए कुछ चयनों पर निर्भर करते हैं, इसलिए हमें इसके साथ सभी प्रकार की समस्याएं मिलती हैं।

+1 भी। दृश्यता जांच में बनाया जाना चाहिए।

:+1: :+1: :+1:

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

इसके लिए +1। मैंने एक्सप्रेशनइंजिन सीएमएस के लिए चुना को फील्डटाइप में बदलने का फैसला किया है, लेकिन ईई के प्रकाशित लेआउट पेज लोड पर फ़ील्ड को छिपाने की अनुमति देता है।

मुझे यकीन नहीं है कि यह संबंधित है, लेकिन ईई के मामले में यह सबसे अच्छा होगा यदि चौड़ाई तरल थी, या बस हमेशा इसके युक्त तत्व का 100% था ...

http://www.alistapart.com/articles/now-you-see-me/

इस में टकरा गया ... यह अभी भी नवीनतम संस्करण में हो रहा है

+1
यह बग नेटफ्लिक्स में आंतरिक ऐप्स के लिए चुने गए प्लगइन के उपयोग को रोक रहा है

:+1: इस मुद्दे पर, आज इस समस्या में भाग गया

आप अपनी सामग्री को इसके साथ छुपा सकते हैं: स्थिति: पूर्ण; बाएं: -999em;
इस तरह, स्क्रीन रीडर और Google उन्हें भी "पढ़" सकते हैं, और आपका चुना हुआ ड्रॉपडाउन इसे फिर से दिखाने पर दिखाई देगा।

मेरा पुल अनुरोध इस मुद्दे को ठीक करता है, लेकिन मेरे दूसरे की तरह और चुने हुए लोगों में से कई को अनदेखा किया जा रहा है। इस प्रोजेक्ट में बहुत अधिक योगदानकर्ता हैं, जिनका कोड आधार बहुत छोटा है।

DelvarWorld, आपके पैच के लिए धन्यवाद। यह मुझे परेशान कर रहा है, और मैं बस एक समान समाधान लागू करने वाला था और मैंने सोचा कि मैं यह देखने के लिए दोबारा जांच करूंगा कि किसी ने पहले ही ऐसा किया है या नहीं।

परीक्षण के तुरंत बाद मैं इसे उत्पादन कोड में तैनात कर दूंगा।

@DelvarWorld आप किस पुल अनुरोध का जिक्र कर रहे हैं? मुझे आपकी ओर से एक खुला पुल अनुरोध दिखाई दे रहा है और यह इस मुद्दे का समाधान नहीं करता है।

@pfiller इस धागे में ऊपर सूचीबद्ध है, https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

चुना के निर्माण से गलत तरीके से कैश की गई चौड़ाई का उपयोग करने के बजाय, परिणाम प्रस्तुत करते समय सीएसएस का उपयोग करने से अधिक महत्वपूर्ण तत्व की "वर्तमान" चौड़ाई का उपयोग करना है।

बहुत सारे बदलाव हुए हैं, और मुझे यकीन नहीं है कि उन्हें स्वयं मर्ज करने का सबसे अच्छा तरीका क्या है। क्या आपके पास जल्द ही एक मर्ज किया गया संस्करण होगा?

@ सबसे अच्छा मेरा पुल अनुरोध करता है, हर बार ड्रॉपडाउन दिखाया जाता है यह तत्व की चौड़ाई से मेल खाता है

@delvarworld मुझे पता है, बस यह सुनिश्चित कर लें कि सही भेद किया गया है।

क्या आप अपनी ऑटो-चौड़ाई वाली शाखा को HEAD के साथ अद्यतित करने का प्रयास कर सकते हैं? मैंने अगस्त के अंत के आसपास इसी तरह के चेकआउट से विलय करने की कोशिश की, लेकिन इनपुट बॉक्स अब गलत चौड़ाई है (यह बहुत चौड़ा है, चुने हुए कंटेनर की चौड़ाई से बह रहा है)।

मैं देख रहा हूं, लेकिन कुछ पुनर्गठन भी हुआ है... कंस्ट्रक्टर को एक सेटअप और फिनिश_सेटअप विधियों के पक्ष में हटा दिया गया है। मैं कॉफ़ीस्क्रिप्ट से भी परिचित नहीं हूँ इसलिए विलय में आपकी प्रगति मेरी तुलना में तेज़ हो सकती है और मेरी मदद के लिए एक पुल अनुरोध सबमिट कर सकता है, क्योंकि इस मुद्दे में बहुत रुचि है।

वास्तव में, मेरी शाखा केवल उस परिवर्तन से अलग हो गई है, और अंततः मैंने प्रोटोटाइप संस्करण पर काम करना छोड़ दिया है। मेरी गलती है, और मुझे लगता है कि इस समय यह विलय योग्य नहीं है।

@DevarWorld हाँ, इसे थोड़ा सा फिर से काम करने की आवश्यकता है ताकि कुछ बिट्स सार कार्यान्वयन में जा सकें। इससे प्रोटोटाइप और jQuery के बीच अंतर बनाए रखना आसान हो जाएगा।

क्या आप इसे एक और बार देने को तैयार होंगे?

एक विनम्र टक्कर ... क्या कोई इस पर काम कर रहा है?

चुना मेरे लिए काम नहीं करता है क्योंकि यह मेरे चयन को छुपा रहा है, और फिर चौड़ाई की गणना करने में असमर्थ है। मुझे सीएसएस में प्रत्येक chzn घटकों पर मनमाने ढंग से चौड़ाई निर्धारित करके इसे हैक करना है। ऐसा नहीं लगता है कि यह कैसे काम करता है, और यह वास्तव में सामान्य भी नहीं दिखता है जैसा कि मैंने इसे उन वेबसाइटों पर देखा है।

मैं भी इस समस्या में भाग गया। जैसा कि यह पता चला है, किसी तत्व की चौड़ाई प्राप्त करने के लिए चुनी गई विधि jQuery के पुराने संस्करण में टूट गई है (मुझे खेद है, लेकिन मेरे पास सटीक संस्करण संख्या नहीं है)। जैसा कि ऊपर उल्लेख किया गया है, बग तब था जब कोई तत्व दिखाई नहीं दे रहा था, चौड़ाई 0 वापस आ जाएगी। यह बग बहुत अच्छी तरह से प्रलेखित है, और इसके आसपास कई तरीके हैं।

हमारे लिए समाधान केवल Jquery के नवीनतम संस्करण में अपग्रेड करना था। हां, हमें पुराने कोड की कुछ पैचिंग और परीक्षण करना था जो कि jQuery का उपयोग करते थे, लेकिन लंबे समय में यह कई मुद्दों को ठीक करता है और आपके जेएस/सीएसएस में छोटे हैक्स की आवश्यकता को कम करता है।

मैं नवीनतम jQuery स्थापित कर रहा हूं जो रेल jQuery मणि और jquery-ujs में पैक किया गया है। मुझे लगता है कि यह अभी भी बहुत पुराना है?

हां, एक वास्तविक संस्करण संख्या होना अच्छा होगा। मैं पुष्टि कर सकता हूं 1.6.2 is
बहुत पुराना भी।

बुध, 16 नवंबर, 2011 को 11:23 बजे, केविन इलियट <
उत्तर@reply.github.com

लिखा था:

मैं नवीनतम jQuery स्थापित कर रहा हूं जो रेल में पैक किया गया है jQuery रत्न
और jquery-ujs. मुझे लगता है कि यह अभी भी बहुत पुराना है?

@RoyJacobs newest वर्तमान में 1.7 है क्योंकि इसे जारी किया गया है।

@RoyJacobs मैं पुष्टि कर सकता हूं कि हम बिना किसी समस्या के 1.6.4 का उपयोग कर रहे हैं।

यह अजीब है। हाँ jQuery-रेल मणि jQuery 1.7 का उपयोग कर रहा है। लेकिन यह अभी भी मेरे लिए काम नहीं कर रहा है।

आप देख सकते हैं कि यह चौड़ाई के साथ प्रतिपादन नहीं कर रहा है। निरीक्षण से पता चलता है कि सभी परिकलित चौड़ाई 0px है। यह तब भी होता है जब मैं .chzn-select को CSS में या सीधे चुनिंदा टैग के स्टाइल पैरामीटर में चौड़ाई रखने के लिए सेट करता हूं।

https://skitch.com/kevinelliott/gjufg/winetribe
https://skitch.com/kevinelliott/gjufp/winetribe

निश्चित रूप से कष्टप्रद। ऐसा लगता है कि चयन प्रदर्शित हो रहा

विचार?

मैं वास्तव में चाहता हूं कि मैं इसे किसी भी परिस्थिति में काम कर सकूं (भले ही मुझे इसे मजबूर करना पड़े)। कुछ भी काम नहीं लगता। मुझे इसे पूरी तरह से छोड़ने के लिए मजबूर किया जाएगा (और मैं निश्चित रूप से इस टूटे हुए सामान से दोबारा निपटना नहीं चाहूंगा)।

सुनिश्चित करें कि आपके चयन में कुछ सीएसएस लागू, स्टाइलशीट या इनलाइन है। यदि आप इसे स्टाइलशीट के साथ करते हैं तो इसका मतलब है कि आपको चुने गए() को कॉल करने से पहले तत्व को डीओएम में इंजेक्ट करना होगा।

लेकिन मैं मानता हूं कि इस अधिकार को प्राप्त करना बहुत कठिन है। मैं वास्तव में सीएसएस के माध्यम से चुने हुए चयन में चौड़ाई लागू करने में सक्षम होना चाहता हूं। एक वर्ग, एक चौड़ाई, px या%।
मेरा सीएसएस तब दिखेगा

.example चुनें, .example .chzn-smth {
चौड़ाई: 50%;
}

और यह चौड़ाई को सही ढंग से लागू करेगा चाहे आप कैसे या कब या कहाँ चुने गए कॉल करें।

मैंने इसे इनलाइन और स्टाइलशीट के माध्यम से व्यवहार में कोई बदलाव नहीं होने के बावजूद कोशिश की है।

लाइटबॉक्स और अकॉर्डियन के लिए काफी बड़ी समस्या। कोई पैच पर काम कर रहा है?

मुझे नहीं लगता कि कोई है! मैं स्तब्ध हूं क्योंकि मुझे समझ में नहीं आता कि यह किसी के लिए कैसे उपयोगी है। मैं अपनी सामग्री को कृत्रिम रूप से छिपा भी नहीं रहा हूं। ऐसा लगता है कि चुना() कॉल ऐसा कर रहा है। कितना अजीब।

@kevinelliott मुझे लगता है कि जिन लोगों को यह समस्या हो रही थी, वे या तो आगे बढ़ गए हैं, या एक फिक्स मिल गया है। जैसा कि मैंने कहा, हमारे मामले में यह केवल jQuery को अपग्रेड करने का मामला था। यह भी ध्यान रखें कि हमने अपना स्टाइल किया हैतत्व की चौड़ाई 224px है और हम 'डिस्प्ले: कोई नहीं;' सेट करते हैं सीधे तत्व पर और स्टाइल शीट में नहीं।

मुझे उम्मीद है कि यह आपके लिए मददगार है और आप इसे काम करने में सक्षम हैं।

धन्यवाद रिचर्ड। मैंने अपने jQuery को अपग्रेड किया और इससे कोई फायदा नहीं हुआ। अजीब बात यह है कि मैं अपने चुनिंदा तत्व को छिपा नहीं रहा हूं। चुना इसे छुपा रहा है। इसलिए मुझे यकीन भी नहीं हो रहा है कि क्या हो रहा है।

@kevinelliott एनपी। मैं उत्सुक हूं, क्या आप अपनी चौड़ाई निर्धारित कर रहे हैंतत्व बिल्कुल? यदि हां, तो क्या आप प्रतिशत या पिक्सेल का उपयोग कर रहे हैं?

मैं हूँ। मैं इसे पिक्सल के साथ सेट कर रहा हूं। मैंने इसे सीधे शैली विशेषता के साथ तत्व पर सेट करने का प्रयास किया है, और मैंने इसे सीएसएस में भी आजमाया है।

@kevinelliott ईमानदार होने के लिए मुझे थोड़ा नुकसान हुआ है। मेरे पास केवल शेष सुझाव हैं 1) एक तत्व में चयन तत्व को लपेटें (हम ऐसा करते हैं, और हमारे काम ठीक हैं), और 2) चुने हुए पुस्तकालय के माध्यम से यह पता लगाने के लिए कि कौन सा बिंदु चुना गया है, आपके चयनित तत्व को छुपा रहा है ... मुझे भी ऐसा करना पड़ा जब हम अपने मुद्दों में भाग गए।

क्षमा करें मैं और अधिक सहायता नहीं कर सका।

मेरे पास एक मामला है, यहां तक ​​​​कि चुने हुए में एक निश्चित चौड़ाई के साथ भी एक चौड़ाई बनाएं: 0px।
मुझे पता नहीं क्यों, इस स्थिति पर काम नहीं करता है, और दूसरों में काम करता है ...

@tiagobrito : मेरे पास एक ही समस्या है और इसे हल करने में सक्षम नहीं है, तय है या नहीं।

@RichardBlair आपकी मदद के लिए धन्यवाद। अगर आप कुछ और सोचते हैं तो हमें बताएं :)

+
वही समस्या, कृपया इसे ठीक करें

@tiagobrito , @dampik क्या आप एक छोटा सा सार

@ सबसे अच्छा मुझे पहले ही पता चल गया है! जब मैं अपनी परियोजनाओं में jQuery 1.4.x का उपयोग करता हूं तो यह संलग्न होता है।
अगले सोमवार मैं आपको jQuery का सही संस्करण बताऊंगा जिससे मुझे चौड़ाई मिलती है: 0px

@bewest मैं भी पुष्टि करता हूँ,
Jquery के पुराने संस्करण (मुझे लगता है, पूर्व 1.6.4)
चयन के लेआउट को गड़बड़ कर दें, जो शुरू में छिपा हुआ है
यहाँ 2 पहेलियाँ हैं:
गड़बड़ लेआउट (पुराना jQuery): http://jsfiddle.net/dampik/2E9fG/
सही लेआउट (नया jQuery): http://jsfiddle.net/dampik/Rs9Z3/

धन्यवाद भगवान, jQuery के संस्करण को Yii ढांचे के नए आगामी संस्करण के साथ अपडेट किया गया था)

मेरे पास यह समस्या है जब मैं चुना को ट्रैक में एकीकृत करने का प्रयास करता हूं। एक टिकट के गुण रूप में प्रारंभिक चयन-बॉक्स की चौड़ाई 0 होती है। गुण डिफ़ॉल्ट रूप से छिपे होते हैं और एक लिंक पर क्लिक करके विस्तारित किया जा सकता है। jQuery v1.7.1

अद्यतन: मैंने इस मुद्दे के आसपास काम किया क्योंकि कम से कम फोलियोटेक ब्लॉग पोस्ट में उल्लिखित सीएसएस चाल jQuery 1.7.1 के साथ काम नहीं करती थी। मैंने अभी तक जेएस दृष्टिकोण की कोशिश नहीं की है।

मेरा समाधान (ट्रैक के लिए):

$("#modify").parent().removeClass('collapsed');
$("#field-test").chosen();
$("#modify").parent().toggleClass('collapsed');

jQuery <= 1.7.1 . का उपयोग करने वालों के लिए

मैंने jQuery एक्चुअल का उपयोग करके इस मुद्दे के आसपास काम किया
से चुना गया बदला गया. jquery.js#301
this.f_width = this.form_field_jq.outerWidth();
प्रति
this.f_width = this.form_field_jq.actual( 'outerWidth' );

// 1.7.2 टिप्पणी के लिए thx @koenpunt संपादित करें

@midday jquery.actual के रीडमे के अनुसार यह केवल 1.7.2 . से पहले के jQuery संस्करणों के लिए आवश्यक है

JQuery के पुराने संस्करण (> = 1.7.1) में अदृश्य डोम तत्वों की चौड़ाई/ऊंचाई खोजने में परेशानी होती है।

@ मध्याह्न यह खोजने के लिए धन्यवाद, वास्तविक प्लगइन को लागू करने के बाद इसने इस मुद्दे को चुना

मुझे अभी भी यह समस्या हो रही है, कोई विचार है कि इसे कैसे ठीक किया जाए?

वही यहाँ अभी भी एक मुद्दा है - मुझे विश्वास नहीं हो रहा है कि यह वर्षों से चल रहा है ...

मैंने भी इस समस्या में भाग लिया है। कुछ मदद पसंद करेंगे।

यह सीएसएस चाल काम करने लगती है:

/* Fix 100% width */
.chzn-container, .chzn-drop, .chzn-drop .chzn-search, .chzn-drop .chzn-search input {
  width: 100% !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width */
.chzn-container { width:250px !important; }

@ग्योपियाज़ा। इसने मेरे लिए समस्या को ठीक कर दिया। धन्यवाद।

एफडब्ल्यूआईडब्ल्यू मैंने पाया है कि .chzn-container, .chzn-drop, और .chzn-search इनपुट पर न्यूनतम-चौड़ाई (बिना भी महत्वपूर्ण) सेट करना शुरू में छिपे हुए चयनों के लिए भी काम करता है।

मेरा समाधान

सीएसएस:

.chzn-container, .chzn-drop {
    width: 100% !important;
}

एचटीएमएल:

चयन तत्व में चौड़ाई निर्धारित करने के बजाय मैं मूल चयन तत्व में एक रैपर div जोड़ना चुनता हूं और रैपर की चौड़ाई निर्धारित करता हूं।

चुना गया अब एक निर्धारित चौड़ाई के साथ आरंभ करने का विकल्प प्रदान करता है जो गणना के किसी भी प्रयास को ओवरराइड करता है। यह संभवतः अधिकांश उपयोग के मामलों के लिए एक संतोषजनक समाधान है जहां प्रारंभिक बिंदु पर चयन छिपा हुआ है:

$("select").chosen({ width: '50%' });
$("select").chosen({ width: '200px' });
$("select").chosen({ width: '15em' });

मुझे लगता है कि यह समाधान शायद वैसा ही है जैसा हम इस बग को ठीक करने के लिए करने जा रहे हैं। मैं वास्तव में उस कोड को शामिल करने से बचना चाहता हूं जो स्क्रीन से चयन को मापने के लिए ले जाता है क्योंकि यह अधिक जटिलता जोड़ देगा।

क्या किसी को इस समाधान के आधार पर इस बग को बंद करने में कोई समस्या है?

मैं संस्करण 0.9.8 का उपयोग कर रहा था और मेरे छिपे हुए चयन सामान्य रूप से काम कर रहे थे। आज मैंने 0.9.14 अपडेट किया है और उन्होंने काम करना बंद कर दिया है। मैं छोटा संस्करण का उपयोग कर रहा था। जब मैं सामान्य संस्करण में बदलता हूं तो सब कुछ फिर से ठीक काम करता है (चुना हुआ.jquery.js 0.9.14)। क्या यह सामान्य है? यह छोटा करने की प्रक्रिया में एक त्रुटि है?

jQuery मिनट या पूर्ण आकार 0.9.14 पर मेरे लिए न तो छुपा काम नहीं कर रहा है।

नया विकल्प 'चौड़ाई' मेरे लिए काम कर गया। कम से कम नए चुने हुए इनपुट के लिए काम करें जो पहले छिपा हुआ था।

@trisweb यह एक ओपन सोर्स प्रोजेक्ट है और यहां दुश्मनी का स्वागत नहीं है। यहां बहुत सारे लोग हैं जिन्होंने आज जो कुछ भी चुना है उसे बनाने के लिए बहुत समय और ऊर्जा दी है। कृपया परियोजना के सुधार में योगदान करने का प्रयास करें या टिप्पणी करने से बचें। धन्यवाद।

@kenearley मैं ओपन सोर्स शिष्टाचार से पूरी तरह अवगत हूं और मुझे अपनी टिप्पणी को और अधिक प्रभावी बनाने के लिए डिज़ाइन करना चाहिए था। उसके लिए माफ़ करना।

उस ने कहा, मुझे सच में लगता है कि कभी-कभी आपको शोर पर चिल्लाने के लिए किसी की आवश्यकता होती है।

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

यह एक कठिन समस्या हो सकती है, यही वजह है कि यह बग इतने लंबे समय से है, लेकिन मुझे विश्वास है कि कुछ समाधान है। व्यक्तिगत रूप से मुझे नहीं लगता कि नई 'चौड़ाई' विशेषता समस्या हल करती है, क्योंकि यह अभी भी सम्मेलन से अधिक कॉन्फ़िगरेशन पर निर्भर करती है, और इस प्रकार डिफ़ॉल्ट मामले में गैर-कार्यशील शून्य-चौड़ाई चुनी जा सकती है।

उस ने कहा, मुझे सच में लगता है कि कभी-कभी आपको शोर पर चिल्लाने के लिए किसी की आवश्यकता होती है।

नहीं, 'शोर पर चिल्लाने' की कोई आवश्यकता नहीं है। यदि कोई इस बारे में पर्याप्त रूप से पर्याप्त महसूस करता है कि कोड कैसे लिखा जाना चाहिए, तो वे पुल अनुरोध की पेशकश कर सकते हैं या रेपो को फोर्क कर सकते हैं और इच्छानुसार बदल सकते हैं।

उस ने कहा, मैं आपके अनुवर्ती कार्रवाई की सराहना करता हूं और सहमत हूं कि वर्तमान समाधान आदर्श नहीं है। जैसे-जैसे हम आगे बढ़ेंगे, हम बेहतर समाधानों की तलाश करेंगे और इसे बदलने में रुचि रखने वाले किसी भी व्यक्ति द्वारा पुल अनुरोधों की बहुत सराहना करेंगे।

@kenearley मैं विनम्रता से बयानबाजी पर आपकी राय से असहमत हूं - लेकिन निश्चित रूप से कोड हमेशा शब्दों की तुलना में जोर से बोलता है। यह इस समय हमारे लिए एक परेशान करने वाली समस्या है इसलिए अगर मुझे कोई अच्छा समाधान मिल जाए तो पुल अनुरोध आ सकता है।

: +1: एक फिक्स के लिए!

मैंने लगभग दो वर्षों के लिए चुना पर अपनी नजर रखी है, और यह अभी भी सबसे सुंदर चयन यूआई सुधार है। लेकिन यह छिपा हुआ मुद्दा अभी भी एक प्रमुख डील-ब्रेकर है, और 100% चौड़ाई कोई समाधान नहीं है।
इसे ठीक करने के लिए +1। जाओ टीम चुनी गई!

फिक्स के लिए +1

आधिकारिक वर्कअराउंड के अलावा जो कॉलर को प्रोग्रामेटिक रूप से चौड़ाई निर्धारित करने में सक्षम बनाता है, मैं निम्नलिखित थ्रेड के आधार पर एक सभ्य वर्कअराउंड का भी सुझाव दूंगा:

http://stackoverflow.com/questions/1841124/find-the-potential-width-of-a-hidden-element

वर्कअराउंड मूल रूप से इस फ़ंक्शन पर निर्भर करता है:

// to be placed anywhere before the jquery.chosen initialization
    var getHiddenOffsetWidth = function (el) {
    // save a reference to a cloned element that can be measured
    var $hiddenElement = $(el).clone().appendTo('body');
    // calculate the width of the clone
    var width = $hiddenElement.outerWidth();
   // remove the clone from the DOM
   $hiddenElement.remove();
   return width;
};

विच को jQuery.chosen कोड के निम्नलिखित मॉड द्वारा बुलाया जाता है (1.0.0 के अनुसार):

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + (($(this.form_field).is(":visible"))
            ? this.form_field.offsetWidth
            : getHiddenOffsetWidth(this.form_field)) + "px";
    }
};

इसके बारे में अधिक जानकारी के लिए #795 भी देखें।

एक त्वरित फिक्स। अपने select को छिपाने के बजाय $(elem).chosen(options) और फिर एक $(elem).hide() यानी पहले चुने हुए तत्व को बनाएं और फिर उसे छुपाएं। इस तरह मूल width को बरकरार रखा जाता है।

क्या यह अभी तय नहीं हुआ है, 3 साल खुला है?

इस फिक्स के लिए +1

संस्करण 0.9.8 में यह बग नहीं था! आप चौड़ाई प्राप्त करने के लिए jQuery बाहरीविड्थ को कॉल करते थे, अब आप HTML ऑफसेटविड्थ का उपयोग करते हैं, जो शून्य पर उत्पन्न होता है ...

मेरा मानना ​​​​है कि उसका मतलब है कि यह एक प्रतिगमन है, जो आशाजनक है। क्या वहाँ था
jQuery विधि से दूर जाने का कारण?

@pfiller मुझे jQuery 1.10.2 का उपयोग करके यह समस्या हो रही थी और आपका $("select").chosen({ width: '50%' }); समाधान मेरे लिए बहुत अच्छा काम करता है। यह मेरे उपयोग के मामलों के लिए एक व्यावहारिक समाधान है।

मैं पूर्ण कोड के नीचे, ऑफसेट चौड़ाई प्राप्त करने के लिए $(this.form_field).outerWidth() का उपयोग करता हूं:

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + $(this.form_field).outerWidth() + "px";
    }
};

+1 मुझे वास्तव में इस फिक्स की ज़रूरत है। मैं डिफ़ॉल्ट रूप से एक फॉर्म छुपा रहा हूं और उपयोगकर्ता को इसे दिखाने के लिए एक बटन पर क्लिक करना होगा। चूंकि यह छिपा हुआ है, यह मेरे चयन की चौड़ाई को ठीक से सेट नहीं कर रहा है

@henesnarfel - आप केवल उस वर्कअराउंड का उपयोग करने का प्रयास करना चाह सकते हैं जो @pfiller ने यहां पोस्ट किया है: https://github.com/harvesthq/chosen/issues/92#issuecomment -18163306

टक्कर, मुद्दा अभी भी है। इसके लिए एक अंतर्निहित समाधान होना चाहिए। मैं इसे +1 कर दूंगा।

मेरे आस-पास का एकमात्र काम जिसके बारे में मैं सोच सकता था, वह 455 (मेरे संपादक पर कम से कम) पर जा रहा था, जो निम्नलिखित कोड को फ़ंक्शन container_width से लौटाता है:

return "" + this.form_field.offsetWidth + "px";

और इसके साथ बदल दिया

return "" + $(this.form_field).outerWidth() + "px";

समस्या गायब हो गई।

@ayyash इस मुद्दे को पूरी तरह से ठीक नहीं करता है। बस इसे चौड़ाई 0 से बेहतर बनाता है।

मेरे लिए, इसने चाल चली (खुशी के लिए अपने आकार भरें):

/* Fix  width bug */
.chosen-container, .chosen-drop, .chosen-drop .chosen-search, .chosen-drop {
  width: 220px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Input Box has to be slightly smaller, don't know why and I don't care. */
.chosen-search input {
    width: 210px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width of the whole thing */
.chosen-container { width:220px !important; }

धन्यवाद

@Thinklabsnk धन्यवाद, अच्छा और त्वरित सुधार।

संपादित करें: यह केवल तभी काम करता है जब आपके सभी चुनिंदा तत्वों की चौड़ाई समान होगी।

कुछ अन्य सुझावों के आधार पर इसके लिए मेरा समाधान यहां दिया गया है। यह छिपे हुए इनपुट को क्लोन करता है और चौड़ाई को मापने के लिए उन्हें शरीर में जोड़ता है, लेकिन यह क्लोन की दृश्यता को जोड़ने से पहले छुपाने के लिए भी सेट करता है, ताकि वे स्क्रीन पर प्रदर्शित न हों।

चुने हुए.jquery.js में कोड की इस पंक्ति को खोजें (मेरे संस्करण में पंक्ति 455):

        return "" + this.form_field.offsetWidth + "px";

और इसे इसके साथ बदलें:

        var calculatedWidth = this.form_field.offsetWidth;
        // Fix for zero width on hidden inputs.
        if (0 == calculatedWidth) {
          var clone = this.form_field_jq.clone();
          clone.css("visibility", "hidden");
          clone.appendTo('body');
          calculatedWidth = clone.offsetWidth;
          clone.remove();
        }
        return "" + calculatedWidth + "px";

उम्मीद है की वो मदद करदे।

@danjjohnson धन्यवाद, इसने चाल

केवल एक चीज यह है कि मुझे बदलना पड़ा:

clone.offsetWidth; 

प्रति

clone.outerWidth();

किसी कारण से, clone.offsetWidth मुझे एक अपरिभाषित मान दे रहा था।

सादर,

यह बग फ़ायरफ़ॉक्स में होता है, क्रोम या अन्य पर कभी भी परीक्षण न करें।

पहली छवि (शीर्ष पर)
चयनित सेट की चौड़ाई के रूप में इसमें स्क्रॉल बार है जबकि यह नहीं है। यह गलत परिणाम है।

दूसरी छवि (मध्य)
चुनी हुई चौड़ाई क्योंकि इसमें पहली छवि की तरह स्क्रॉल बार है लेकिन इस बार इसमें स्क्रॉल बार है जो सही है।

तीसरी छवि (नीचे)
इस प्रकार पहली छवि होनी चाहिए जबकि इसमें कोई स्क्रॉल बार नहीं है। यह परीक्षण मैं चुना चौड़ाई width: 100% !important सेट किया गया था

: thumbsup: रों संशोधन @danjjohnson के लिए '@johnmerced साथ ठीक'

मेरे पास एक और फिक्स है, सरल और काम करता है। बिंदु चौड़ाई को शून्य न होने दें:

   // don't let the width to be "0"
   $(".chosen-select,.chosen-multiple-select").each(function(){
        if($(this).width() == 0){
            $(this).width(240);
        }
    });
    // call it :)
    $(".chosen-select,.chosen-multiple-select").chosen({allow_single_deselect:true});

हेलो,
इस मुद्दे के लिए मेरा समाधान अब तक पोस्ट किए गए समाधानों का एक संयोजन है (1.2.0 चुना गया):

    AbstractChosen.prototype.container_width = function () {
        if (this.options.width != null) {
            return this.options.width;
        } else {
            //Original:
            //return "" + this.form_field.offsetWidth + "px";
            //Workaround:
            if(this.form_field.offsetWidth > 0) {
                return "" + this.form_field.offsetWidth + "px";
            } else {
                if($(this.form_field).css('width')) {
                    return parseInt($(this.form_field).css('width'),10) + "px";
                } else {
                    return "" + $(this.form_field).outerWidth() + "px";
                }
            }
        }
    };

छिपे हुए चयनों के लिए बस पीएक्स में एक स्थिर सीएसएस-चौड़ाई परिभाषित करें।

एक समग्र सुधार अभी भी आवश्यक है।

यहां समस्या यह है कि यदि आप विंडो का आकार बदलते हैं, तो चयन हमेशा उसी आकार का दिखाई देता है जैसा कि प्रारंभ किया गया था। मुझे लगता है कि एक बेहतर समाधान यह होगा कि दिखाए जाने पर या विंडो का आकार बदलने पर चयन का आकार बदलने के बजाय, चौड़ाई का अनुमान लगाने के बजाय इसे छुपाए जाने पर प्रारंभ करना चाहिए।

क्या चयनित वस्तु के आकार को गतिशील रूप से बदलने का कोई तरीका नहीं है? चूंकि मुझे पता है कि आकार कब बदलना है (ईवेंट या ऑनशो या इसी तरह का आकार बदलें), यह एक कामकाज हो सकता है। क्या चुने हुए ऑब्जेक्ट के आकार को बदलने के लिए कोई एपीआई फ़ंक्शन है? या किसी तरह पुन: प्रारंभ करें?

: +1: एक फिक्स के लिए। आज इसमें भाग लें

:+1: इसे ट्रैक करने में बहुत अधिक समय बर्बाद हुआ।

अभी भी मोडल में आकार के साथ समस्या आ रही है। 4.0 रिलीज में इसे ठीक करने की कोई योजना?

@danjjohnson आपका फिक्स समस्या को ठीक नहीं करता है जब पहला तत्व बहुत छोटा होता है तो अन्य

@danjjohnson पर आधारित

किराये का

लाइन ढूंढें

return "" + this.form_field.offsetWidth + "px";

के साथ बदलें

var calculatedWidth = this.form_field.offsetWidth;
          // Fix for zero width on hidden inputs.
          if (0 == calculatedWidth) {
              var clone = this.form_field_jq.clone();
              clone.css({"left": 10000, "position": "fixed"});
              clone.appendTo('body');
              calculatedWidth = clone.outerWidth();
              clone.remove();
          }
          return "" + calculatedWidth + "px";

$ ('चुनें')। चुना ({चौड़ाई: '100%'}); @pfiller द्वारा मेरे लिए एक

धन्यवाद

मैं चुने हुए खोज वर्ग से कैसे छुटकारा पा सकता हूं क्योंकि मैं अपनी परियोजना निर्देशिका में संपत्ति लोड करने में सक्षम नहीं हूं?

मुझे एक टाइमआउट जोड़ना पड़ा, जब एक टेम्पलेट से स्थिर चयन लोड हो रहा था जिसे अभी तक प्रस्तुत नहीं किया गया था। आरंभीकरण का प्रयास करते समय पदानुक्रम में कुछ भी मेट्रिक्स नहीं था। इसे शून्य टाइमआउट में लपेटना कम से कम घटना कतार के अंत तक प्रारंभिक टक्कर ..

// Found this in chosen.jquery.js and patched it as follows
AbstractChosen = (function () {
    function AbstractChosen(form_field, options) {
        if (!AbstractChosen.browser_is_supported()) {
            return;
        }

        var self = this;
        window.setTimeout(function () {
            self.form_field = form_field;
            self.options = options != null ? options : {};
            self.is_multiple = self.form_field.multiple;
            self.set_default_text();
            self.set_default_values();
            self.setup();
            self.set_up_html();
            self.register_observers();
        }, 0);
    }

मुझे अभी-अभी इस बग ने काट लिया है, मेरे लिए समस्या को 100% ठीक कर दिया है।

@harvesthq क्या आप इसे ठीक करने के लिए एक पुल अनुरोध स्वीकार करेंगे? अभी तक सबसे अच्छे समाधान के बारे में निश्चित नहीं है, लेकिन मुझे इसे ठीक करने और पुल अनुरोध करने में खुशी होगी: दिल:

इसके लिए एक मजबूत समाधान एनजी-शो के बजाय एनजी-इफ का उपयोग करना है। पूरी तरह से काम करता है और सरल है।

मुझे पता चला है कि कई स्थितियों में एनजी-इफ पसंदीदा विकल्प है। न केवल टूटे हुए एनजी-सेलेक्ट की मरम्मत करना, बल्कि पुनरावर्ती नियंत्रकों (एनजी-इफ, एनजी-कंट्रोलर, एनजी-इनिट और एनजी-टेम्पलेट के संयोजन का उपयोग करके) को भी अनुमति देना।

तो ऐसा लगता है कि यह 4 साल पुराना मुद्दा अभी भी हल नहीं हुआ है?!?!

+1

इस बीच +1... मैं select2 . का उपयोग कर रहा हूं

क्या चुने हुए पिकलिस्ट पर क्लिक करने पर क्षेत्र में स्पिनर का विस्तार करने का कोई तरीका है, यह तब होना चाहिए जब डेटा को चुने हुए jQuery में जोड़ा जा रहा हो। मैं चुने हुए jQuery में बड़ी संख्या में रिकॉर्ड संसाधित कर रहा हूं और उन्हें संसाधित करने और दिखाने में समय लगता है। ??

क्या एक महाकाव्य 5 साल की बग ... और अभी भी लोगों को काट रहा है (आउच!)।

Google के पास उनके मानचित्र के साथ एक समान बग है जो एक छिपे हुए div में ठीक से प्रदर्शित नहीं होता है। हालाँकि इन दोनों समस्याओं के समाधान सरल हैं जिन्हें लागू करना आसान है।

हां, मैंने पिछले साल IIRC में उस Google मैप्स बग को मारा था, लेकिन कितने लोगों ने इस रिपोर्ट को खोजने से पहले आधा दिन कोसने और विभिन्न चीजों की कोशिश करने में बिताया? लोकप्रिय पुस्तकालयों में इस तरह के कीड़े समय बर्बाद करते हैं। प्रत्येक वर्ष इन पुस्तकालयों में से किसी एक को सीखने वाले लोगों की संख्या से गुणा करने पर कुल लागत शायद चौंका देने वाली होती है... यदि वे इसे ठीक नहीं करने जा रहे हैं, तो कोई बात नहीं। इस बिंदु पर इसे ठीक करना शायद बड़ी संख्या में तैनात वर्कअराउंड के साथ अजीब तरह से बातचीत कर सकता है ... उस स्थिति में उन्हें यह स्वीकार करना चाहिए कि वे इसे ठीक नहीं कर रहे हैं और दस्तावेज़ीकरण में कहीं प्रमुख रूप से वर्कअराउंड का दस्तावेजीकरण करते हैं ताकि लोगों को बनाने के लिए संघर्ष न करें (या मिस) इस सामान पर समय सीमा।

मेरा "समग्र" फिक्स दूसरों के समान है, और यह मानता है कि मार्कअप में मेरे सभी चयनों की चौड़ाई उनके मूल div का 100% है। हम बूटस्ट्रैप का उपयोग करते हैं इसलिए यह हमारे लिए मामला है।

पेज लोड होने पर .chosen() को इनिशियलाइज़ करने के ठीक बाद इस कोड को रन करें।

```
$("। चुना-कंटेनर")। प्रत्येक (फ़ंक्शन (i, elem) {
अगर ($(elem).width() == 0) {
$ (तत्व)। चौड़ाई ("100%");
}
});
````

आप में से उन लोगों के लिए जिन्हें समस्या थी, जहां तत्व शुरू में एक सीएसएस छिपे हुए कंटेनर के अंदर था, और फिर जब दृश्यमान बनाया गया तो 0px की चौड़ाई थी - मुझे जो फिक्स मिला वह चौड़ाई जेएस कॉन्फ़िगरेशन में सेट करना था;

var config = { '.chosen-select' : {}, '.chosen-select-width' : {width:"95%"} } for (var selector in config) { $(selector).chosen(config[selector]); }

फिर मैंने चुनिंदा इनपुट दिए css क्लास को चुना-चयन-चौड़ाई

<select name="f01" class="chosen-select-width" id="item_select_staff">

चुने हुए v1.6.2 और jQuery संस्करण 3.1.1 के साथ चाल चल रहा था।

मैं सिर्फ डिफ़ॉल्ट चुने हुए चौड़ाई विकल्प (ऑटो) को छोड़ता हूं और जोड़ता हूं

.chosen-container { min-width:5em; }

मेरी साइट के सीएसएस में (आवश्यकतानुसार न्यूनतम-चौड़ाई समायोजित करना)। यह कभी भी 0px (या उपयोग करने के लिए बहुत छोटा) नहीं बनता है, जबकि अभी भी जब संभव हो तो चयन की आदर्श चौड़ाई को फ़िट करता है (100% चौड़ाई या उस प्रभाव के लिए कुछ भी अच्छी तरह से काम नहीं करता है जब आपके पास अन्य सामग्री के साथ इनलाइन तत्वों का चयन होता है और यह विधि मुख्य मुद्दे के साथ-साथ इनलाइन चुनिंदा तत्वों की अनुमति देता है और प्रतीत होता है कि सबसे सरल और सबसे सरल कार्यान्वयन की पेशकश करता है)।

यह सात साल बाद भी कैसे टूटा हुआ है?

बूटस्ट्रैप 3 के साथ मेरा वर्कअराउंड निम्नलिखित शैली जोड़ रहा है:

.chosen-container {
    min-width: 90%;
}

बूटस्ट्रैप 3 के साथ मेरा वर्कअराउंड निम्नलिखित शैली जोड़ रहा है:

.chosen-container {
    min-width: 90%;
}

खरीदें तो ड्रॉपडाउन अभी भी दिखाई नहीं दे रहा है.... @koenvanderlinden

यह पहले से ही प्रलेखित है
https://harvesthq.github.io/chosen/options.html
width विकल्प और उसके विवरण की जाँच करें

@qbadev हालांकि यह इसे बनाता है इसलिए तत्व आवश्यकता होने पर सामग्री को फिट करने के लिए आकार नहीं देता है, इसलिए मैं वास्तव में इसे एक फिक्स के रूप में नहीं देखता (विशेष रूप से न्यूनतम-चौड़ाई का उपयोग करते समय इससे बेहतर परिणाम मिलता है)।

दस्तावेज़ीकरण का विवरण प्रभावी रूप से केवल बग को कॉल करता है (जिसे हल करना संभव होना चाहिए) और बग के लिए संभावित समाधान के रूप में इसका उपयोग करने का उल्लेख करता है।

@koenvanderlinden min-width:90%; की सिफारिश करता है, इसलिए यह सामान्य रूप से 90% चौड़ाई है, यदि चयन की सामग्री को इसकी आवश्यकता होती है तो यह 100% चौड़ाई तक जा सकती है। फिर से, मैं अभी भी min-width:5em; (उपयोग के मामले के आधार पर अलग-अलग एम मूल्य भिन्न) का विकल्प चुनता हूं, इसलिए यह कभी भी बहुत छोटा नहीं होता है, लेकिन यह अभी भी माता-पिता के आधार पर आकार के बजाय चयन की सामग्री को फिट करने के लिए विस्तार करने का प्रयास करता है तत्व।

@ केजेनी मैंने यह नहीं कहा कि यह एक फिक्स है। यह सिर्फ प्रलेखित है। और यह एक अच्छा उपाय है। मेरा मुख्य मुद्दा यह था कि चुना गया लगभग 0 चौड़ाई init के बाद था। अब, "फिक्स" के बाद, मैं चुना हुआ देख सकता हूं और मूल तत्व पर लागू सीएसएस कक्षाओं का उपयोग करके जो कुछ भी मैं चाहता हूं उसके साथ कर सकता हूं।

मुझे पहले भी कई बार ऐसी समस्याओं का सामना करना पड़ा, जिसकी गणना नहीं की जा सकी क्योंकि वस्तु 0 चौड़ाई थी। इसे सार्वभौमिक तरीके से हल नहीं किया जा सकता है, क्योंकि प्रत्येक एप्लिकेशन अलग-अलग होता है।
इसलिए जब एक का चयन init के एक पल में दिखाई देता है, तो किसी कार्रवाई की आवश्यकता नहीं होती है, लेकिन अगर यह छिपा हुआ है, तो width विकल्प का उपयोग करना उपयोग करने का एक तरीका है।

कस्टम चौड़ाई समर्थन
चुना के साथ एक कस्टम चौड़ाई का उपयोग करना उतना ही आसान है जितना कि जब आप चुना बनाते हैं तो एक विकल्प पास करना:
$(".chosen-select").chosen({width: "95%"});

https://harvesthq.github.io/chosen/

1.* से 3.* रिलीज में jQuery के अपग्रेड के बाद मुझे यह समस्या मिली।
हल किया कि:

चुना.jquery.js:543
AbstractChosen.prototype.container_width = function () {
return this.form_field.offsetWidth + "px";
->
return $(this.form_field).outerWidth() + "px";