Chosen: "ओवरफ्लो: छुपा" वाले क्षेत्र में रखे जाने पर चुना गया "कट" हो जाता है।

यह अंक #59 . जैसा ही है

क्या यह अपरिहार्य नहीं है क्योंकि कंटेनर तत्व ठीक है, "अतिप्रवाह: छिपा हुआ" बस सीएसएस कैसे काम करता है। इसके आस-पास एकमात्र तरीका कंटेनर के बाहर ड्रॉप डाउन को प्रस्तुत करना है और फिर पूर्ण स्थिति का उपयोग करना है।

हाँ, मैं डीफिशर से सहमत हूं। एक चुने हुए मुद्दे की तरह प्रतीत नहीं होता है। परिभाषा के अनुसार, अतिप्रवाह संपत्ति निर्दिष्ट करती है कि क्या होता है यदि सामग्री किसी तत्व की सीमाओं से अधिक हो जाती है। यदि आप नहीं चाहते कि यह _overflow_ छिपा हो, तो उस गुण को बदल दें।

सच है, मुझे लगता है कि यह संवाद बॉक्स के साथ एक सामान्य उपयोग का मामला है। (विशेष रूप से jQuery संवाद)

यह एक सामान्य उपयोग का मामला है, हालांकि इस टिकट के आधार पर, जैसा कि मैंने पहले उल्लेख किया है ... यदि आप इसे पूरा करना चाहते हैं तो पूरी संरचना और कार्यान्वयन को बदलना होगा।

ऐसा होने के लिए आपको कंटेनर के बाहर रेंडर करने के लिए _required_ हैं और फिर ट्रिगर के सापेक्ष स्थिति का पता लगाने के लिए jQuery/JS मैजिक का उपयोग करें।

jQuery डायलॉग का मामला कंटेनर तत्व पर निर्भर नहीं है, इसलिए यह केवल केंद्र आयामों और संवाद की चौड़ाई के आधार पर स्थिति का उपयोग करता है।

यह एक सीएसएस मुद्दा है, चुना हुआ मुद्दा नहीं। ओवरफ्लो न डालें: कंटेनर पर छिपा हुआ। यदि आप यही कर रहे हैं तो आपको इसके नीचे की फ़्लोट्स को साफ़ करने के लिए एक और तकनीक का उपयोग करना होगा।

मैंने अभी कुछ कोड लिखा है जो मुझे लगता है कि आप जो खोज रहे हैं वह करता है:

$.fn.विस्तार ({
चुना गया: फ़ंक्शन (डेटा, विकल्प) {
अगर ($(यह).parent().css("overflow") == "hidden") {
// अंतर की गणना करने के लिए माता-पिता और बच्चे के बीच ऑफसेट प्राप्त करें
// जब हम निरपेक्ष करने के लिए धक्का देते हैं
var y = $ (यह)। ऑफ़सेट ()। शीर्ष - $ (यह)। माता-पिता ()। ऑफसेट ()। शीर्ष,
एक्स = $ (यह)। ऑफसेट ()। बाएं - $ (यह)। माता-पिता ()। ऑफसेट ()। बाएं,
$t1 = $("<div/>", {
सीएसएस: {
"स्थिति": "रिश्तेदार",
"ऊंचाई": $ (यह)। माता-पिता ()। ऊंचाई,
"चौड़ाई": $ (यह)। माता-पिता ()। चौड़ाई
}
}),
$t2 = $("<div/>", {
सीएसएस: {
"स्थिति": "पूर्ण",
"शीर्ष": वाई,
"बाएं": x
}
});
$t1.insertBefore($(यह)। माता-पिता ());
$ (यह)। माता-पिता ()। संलग्न करें ($ t1);
$t2.appendTo($t1);
$ (यह)। संलग्न करें ($ t2);
}
वापसी $ (यह)। प्रत्येक (फ़ंक्शन (इनपुट_फ़ील्ड) {
अगर (!($(यह)).hasClass("chzn-done")) {
नया चुना लौटाएं (यह, डेटा, विकल्प);
}
});
}
});

(बीटीडब्ल्यू मैं आज के रूप में जीथब के लिए नया हूं इसलिए यदि कोई अलग जगह है जहां मुझे कोड पोस्ट करना चाहिए तो मुझे बताएं)

वह कोड प्रभावी रूप से निम्न कार्य करता है:

1. चयन बॉक्स और माता-पिता के बीच ऑफ़सेट की गणना करें।
2. अपने अतिप्रवाह के समान आयामों के साथ एक पैरेंट डिव बनाएं और रिश्तेदार पर सेट करें।
3. चरण 1 से x और y ऑफ़सेट का उपयोग करके तत्व को निरपेक्ष बनाने वाले चयन बॉक्स के लिए एक अभिभावक बनाएं।
4. चयन के माता-पिता से पहले नया माता-पिता डालें, नए माता-पिता के अंदर अतिप्रवाह div संलग्न करें, उस नए माता-पिता को मास्टर माता-पिता के अंदर संलग्न करें, चयन को नए बच्चे के माता-पिता में जोड़ें।

दिलचस्प विचार मैथ्यू, लेकिन मुझे लगता है कि यह एक jQuery-UI संवाद में काम नहीं करेगा, है ना?

इसकी अधिक संभावना है कि ड्रॉपडाउन तत्व (.chzn-drop) को .chzn-कंटेनर से बाहर निकालने और दस्तावेज़ के मुख्य भाग तक ले जाने की आवश्यकता है...

पृष्ठ में बस एक शैली जोड़ें और आपका उत्तर हां है:

.ui-संवाद{ अतिप्रवाह:दृश्यमान; }

मेरे लिए काम नहीं करता है, क्योंकि मैं div के कॉलम के रूप में (टीडी और टेबल के विपरीत) का उपयोग करके अपने पेज बनाता हूं।
मैं पड़ोसी divs को बर्बाद करने से भगोड़ा सामग्री को रोकने के लिए " ओवरफ्लो: छुपा " का उपयोग करता हूं।

मुझे लगता है कि आप में से कई लोग एक ही संरचना का उपयोग करते हैं।

यह काम नहीं करेगा, क्योंकि संवाद अतिप्रवाह पर सेट हैं
यदि आवश्यक हो तो स्क्रॉलबार रखें।

शुक्र, जुलाई २९, २०११ को रात ११:४७ बजे, एथनियल
उत्तर@reply.github.com
लिखा था:

मेरे लिए काम नहीं करता है, क्योंकि मैं div के कॉलम के रूप में (टीडी और टेबल के विपरीत) का उपयोग करके अपने पेज बनाता हूं।
मैं पड़ोसी divs को बर्बाद करने से भगोड़ा सामग्री को रोकने के लिए " ओवरफ्लो: छुपा " का उपयोग करता हूं।

मुझे लगता है कि आप में से कई लोग एक ही संरचना का उपयोग करते हैं।

इस ईमेल का सीधे उत्तर दें या इसे GitHub पर देखें:
https://github.com/harvesthq/chosen/issues/86#issuecomment -1681303

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

ठीक है, यहां स्क्रीनशॉट का एक समूह है जो उम्मीद से इस मुद्दे को स्पष्ट करता है।

http://i.imgur.com/9ZY9O.png
http://i.imgur.com/c2PLo.png
http://i.imgur.com/1oqZ7.png
http://i.imgur.com/ZBrQj.png

स्क्रीनशॉट 1 और 2 दिखाते हैं कि यह कैसा व्यवहार करता है, इसके लिए पर्याप्त जगह नहीं है
संवाद "अंदर" ड्रॉपडाउन, इसलिए यह स्क्रॉल करता है और a . के रूप में छिपा होता है
नतीजा। यह उपयोग करने के लिए बहुत ही भद्दा और बदसूरत है और यह नहीं कि कैसे बनाया गया है
चयन नियंत्रण कार्य (वे सामग्री के शीर्ष पर दिखाते हैं, कोई फर्क नहीं पड़ता
वे इसके अंदर कितने गहरे हैं या इसकी अतिप्रवाह शैली क्या है।)

स्क्रीनशॉट ३ और ४ मेरे वर्तमान कार्य-आसपास को दिखाते हैं, जो कि संपूर्ण को प्रस्तुत करना है
ड्रॉपडाउन के नीचे अंतरिक्ष का ढेर। यह भी कुरूप है और रूप बनाता है
उपयोग करने में कठिन।

तो, संक्षेप में, वास्तविक बिंदु यह है कि देशी चयन नियंत्रण नहीं हैं
उनके मूल कंटेनर तक ही सीमित है और यदि यह संभव है, तो चुना गया
बढ़ाया चयन नियंत्रण या तो नहीं होना चाहिए, क्योंकि इसे होने के लिए डिज़ाइन किया गया है
देशी नियंत्रण के लिए एक ड्रॉप-इन प्रतिस्थापन।

यह सैद्धांतिक रूप से किया जा सकता है लेकिन इसके लिए चुने हुए प्लगइन द्वारा पूरी तरह से अलग निर्माण/स्थिति प्रणाली की आवश्यकता होगी। यह परिवर्तन व्यापक होगा और वर्तमान प्लगइन के लगभग 30% पुनर्लेखन की आवश्यकता होगी। मैं इसे एक फीचर अनुरोध मानता हूं, बग नहीं। सभी ब्राउज़रों में चुनिंदा तत्वों के लिए एक डिफ़ॉल्ट रेंडर होता है। चुना इसे divs का उपयोग करके दोहराता है लेकिन इसे एक चुनिंदा तत्व की तरह नहीं माना जाता है।

जैसा मैंने कहा, ऐसा करने का एकमात्र तरीका ट्रिगर तत्व के बाहर पूर्ण स्थिति है। कोई अन्य रास्ता नहीं है। @medelbrock . पर सही

हालांकि ब्राउज़र विजेट की तरह व्यवहार करना बहुत अच्छा होगा, मैं मानता हूं कि इसे एक फीचर माना जाना चाहिए, बग नहीं। क्या हम वर्तमान में अधिकतम ऊंचाई निर्धारित कर सकते हैं?

@veloper : मैंने इसे जाने दिया (जितना अच्छा मैं कर सकता था) और यह मदद नहीं कर रहा था। मैं नहीं देख सकता कि यह कैसे काम करेगा, क्योंकि div.chzn-drop अभी भी संवाद में निहित है, इसलिए यह पूरी तरह से स्थित है या नहीं, इस पर ध्यान दिए बिना क्लिप किया जाएगा।

इसे रोकने का एकमात्र तरीका div.chzn-drop को संवाद से बाहर निकालना और इसे <body> का बच्चा बनाना है, लेकिन जैसा कि हर कोई इंगित कर रहा है, यह किसी से भी बड़ा बदलाव है कोशिश में हाथ मलने को तैयार हैं।

दुर्भाग्य से overflow:visible का उपयोग करना एक विकल्प नहीं है, यदि आवश्यक हो तो संवाद को स्क्रॉल करने योग्य होना चाहिए।

मुझे लगता है कि मैंने ड्रॉप डाउन स्थिति को पूर्ण पर सेट करके और ड्रॉप डाउन सेटिंग को इसकी स्थिति दिखाते हुए इस मुद्दे को हल किया है।
उदाहरण के लिए बदलना (जावास्क्रिप्ट संपादित करना)

this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
});

प्रति

var parent = this.dropdown.parent();
var offset = parent.offset();
dd_top = offset.top + parent.outerHeight();
dd_width = parent.width();
this.dropdown.css({
    "top": dd_top + "px",
    "left": offset.left,
    "width": dd_width + "px"
});

Wijmo/jQuery UI डायलॉग के अंदर चुने गए काम को करने की कोशिश करते समय मैं स्वयं इस समस्या में भाग रहा हूं। मैं यहां अपनी लीग से बाहर हो सकता हूं, लेकिन क्या "ड्रॉपडाउन" भाग को छिपाने के दौरान "डिस्प्ले: कोई नहीं" और फिर दिखाए जाने पर "डिस्प्ले: ब्लॉक" बनाने का कोई आसान समाधान नहीं है? ड्रॉपडाउन खुला होने पर भी आपको स्क्रॉल बार लगेंगे, लेकिन स्क्रॉल बार हमेशा मौजूद रहने से शायद यह बेहतर है।

फिक्स (क्रोम 13, फ़ायरफ़ॉक्स 7 और आईई 9 में परीक्षण किया गया):

चुने गए सीएसएस में:

.chzn-कंटेनर .chzn-ड्रॉप {
स्थिति: निश्चित;
}

और Chosen.prototype.results_show . में

वर ऑफसेट = this.container.offset ();
यह.ड्रॉपडाउन.सीएसएस({
"टॉप": (offset.top+dd_top) + "px",
"बाएं": ऑफसेट। बाएं + "पीएक्स",
"प्रदर्शन क्षेत्र"
});

http://img30.imageshack.us/img30/4094/chosen3.png

वह सामान है, अच्छी सोच @levushka। मेरी शाखा में अब हल किया गया: https://github.com/tompaton/chosen/commit/fda07051161f3fffe6049362b6c9b66ffbe857d1

ठीक है, यह उससे थोड़ा अधिक जटिल है। यदि पृष्ठ स्क्रॉल किया गया था तो उपरोक्त सुधार काम नहीं करता था।

मैंने अपने रेपो को एक बदलाव के साथ अपडेट किया है जो इसे ठीक करता है, ड्रॉपडाउन अब सही ढंग से स्थित है, लेकिन यदि ड्रॉपडाउन दिखाई देने पर पृष्ठ स्क्रॉल किया जाता है तो यह अपेक्षा के अनुरूप नहीं चलता है। यह कष्टप्रद है, लेकिन शो स्टॉपर नहीं।

iOS 5 _might_ इसे हल करता है, लेकिन iOS वर्तमान में स्थिति का समर्थन नहीं करता है: ठीक उसी तरह जैसे डेस्कटॉप ब्राउज़र करते हैं। चुना गया डेस्कटॉप पर बहुत अच्छा काम करता है, लेकिन यह खराब डिज़ाइन किए गए मोबाइल ब्राउज़र पर इसके उपयोग को सीमित कर सकता है...

मैं यहाँ केवल Apple को ही नहीं चुन रहा हूँ, Android के पुराने संस्करण में भी स्थिति के लिए समर्थन की कमी है: निश्चित।

JQuery 1.7 के रूप में (अभी तक जारी नहीं किया गया है, लेकिन रिलीज उम्मीदवार में) उनके पास सीएसएस स्थिति निश्चित समर्थन के लिए एक अंतर्निहित परीक्षण है:
http://bugs.jquery.com/ticket/6809

jQuery 1.7 का पता लगाने और उनके परिणाम का उपयोग करने, या उनके कोड की प्रतिलिपि बनाने और अन्यथा एक अलग परिणाम प्राप्त करने के लायक हो सकता है।

+1 शरीर तत्व के अंत में स्थिति के लिए।

jQuery विजेट "स्वत: पूर्ण" जांचें। उस समस्या का बहुत अच्छा समाधान:

http://jqueryui.com/demos/autocomplete/

वैसे महान प्लगइन।

मुझे यह समस्या ज्यादातर वेबकिट ब्राउज़र में थी। आईई सिर्फ चुने हुए मानसिक हो जाता है, इसलिए मैंने इसे अक्षम कर दिया है। Jquery का उपयोग करके, मैं जांचता हूं कि ब्राउज़र एक वेबकिट है या नहीं, और मेरे चुने हुए div के अतिप्रवाह को समायोजित करें:

if($.browser.webkit) $(this).css("overflow",($(this).is(":visible"))?"visible":"hidden");

जहां यह चयन युक्त div है।

+1 @levushka और @tompaton बिल्कुल सही नहीं है, लेकिन काफी अच्छा है-ईश। मुश्किल से :)

@levushka समाधान बहुत अच्छा है, लेकिन यह वैश्विक है ... इसलिए window.top पर जब आप नीचे स्क्रॉल करते हैं और चुने हुए पर क्लिक करते हैं, तो यह गलत स्थिति में

में चुना.prototype.results_show

बदलने के:

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

साथ:

if($('.popup').length!=0) {

  var offset = this.container.offset();
  this.dropdown.css({
    "top": (offset.top+dd_top) + "px",
    "left": offset.left + "px",
    "display": "block"
  });

} else {

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

}

सीएसएस:

   .popup .chzn-container .chzn-drop { position:fixed; }

यदि आप jQuery UI या कुछ और का उपयोग कर रहे हैं, तो आपको z-index के साथ समस्या हो सकती है, इसलिए चुने हुए z-index को उच्च मानों पर सेट करें (jQuery UI यह 1010+ है)

अब यह एफएफ में काम कर रहा है और क्रोम के लिए आपको चाहिए:

     .popup { overflow-x:visible; overflow-y:visible; }

प्रेमी तत्वों में अतिप्रवाह हो सकता है छिपा हुआ ।

क्यों नहीं शरीर में ड्रॉपडाउन प्रस्तुत करें और बॉक्स को स्थिति देने के लिए jQuery UI के स्थिति फ़ंक्शन का उपयोग करें? http://jqueryui.com/demos/position/। यह कई jQuery ui विजेट्स के लिए उपयोग की जाने वाली मानक विधि है।

$( ".czn-drop")। स्थिति ({
का: $ ("# कंटेनर"),
मेरा: "बाएं ऊपर",
पर: "बाएं नीचे",
});

मुझे बार्गिंग करने के लिए क्षमा करें, मुझे एक jQueryUI संवाद में चुने हुए ड्रॉप डाउन को प्रदर्शित करने में एक ही समस्या थी।
मैंने अतिप्रवाह के साथ सामान्य सामान की कोशिश की लेकिन यह मेरे अन्य संवादों को गड़बड़ कर रहा था।

इसके बजाय मैंने जो किया वह मेरे संवाद को एक निश्चित ऊंचाई पर सेट करना था और चुने हुए ड्रॉप को एक निश्चित ऊंचाई पर भी सेट करना था।
सीएसएस के बजाय चुने हुए विकल्पों में से ऐसा करने का विकल्प होना अच्छा होगा।

.chzn-ड्रॉप {
अतिप्रवाह: ऑटो;
अधिकतम-ऊंचाई: 75px;
}

शायद यह किसी और की मदद करता है।

काफी n00bish/RTFM प्रश्न के लिए बहाना-मोई, लेकिन मैं कंटेनर के बाहर ड्रॉपडाउन कैसे प्रस्तुत कर सकता हूं (कहें, body )? अभी, केवल एक चीज जो मेरे दिमाग में आती है वह है प्लगइन को फोर्क करना और उस कोड के टुकड़े को उसमें डालना। इसे प्राप्त करने का एक और अधिक सुंदर तरीका होना चाहिए।

ड्रॉप डाउन खुला/बंद होने पर क्या कोई घटना चुनी गई है। यदि ऐसा है, तो मैं माता-पिता divs की अतिप्रवाह सेटिंग को दृश्यमान में बदल सकता हूं और फिर वापस कर सकता हूं। मैंने इसके साथ कोशिश की:

$(".chzn-drop").show(0, function () { 
   $(this).parents("div").css("overflow", "visible");
});    

और, हाँ, यह काम किया। लेकिन, तब जब मैंने जोड़ा:

$(".chzn-drop").hide(0, function () {
   $(this).parents("div").css("overflow", "");
});

यह अब काम नहीं किया। मुझे लगता है क्योंकि मेरे पास फॉर्म पर कई चुनिंदा नियंत्रण हैं। अगर मैं इस कोड को एक खुली/करीबी घटना के अंदर जोड़ सकता हूं तो मुझे लगता है कि यह मुझे वहां ले जाएगा जहां मैं जाना चाहता हूं।

आप मूल चयन तत्व पर भेजे गए liszt:showing_dropdown और liszt:hiding_dropdown को सुन सकते हैं

बहुत बढ़िया ... तो इसने मेरी समस्या हल कर दी:

$(.chzn-select").on(" liszt:showing_dropdown ", function() {
$ (यह)। माता-पिता ("div")। सीएसएस ("अतिप्रवाह", "दृश्यमान");
});
$(.chzn-select").on(" liszt:hiding_dropdown ", function() {
$ (यह)। माता-पिता ("div")। सीएसएस ("ओवरफ्लो", "");
});

बेशक, यह सभी लेआउट के साथ काम नहीं कर सकता है।

धन्यवाद... बॉबी

मैंने <body/> के ड्रॉपडाउन बच्चे को बनाने के लिए कोड फोर्क किया है। मैंने अभी तक इसका पर्याप्त परीक्षण नहीं किया है, लेकिन यह यहां पूरी तरह से काम कर रहा है -> https://github.com/gil/chosen

क्या आप देख सकते हैं कि क्या यह आपकी समस्या का समाधान करता है, @tompaton? मुझे लगता है कि स्थिति को मैन्युअल रूप से ठीक करने के लिए मुझे अभी स्क्रॉलिंग का पता लगाना है।

कांटा ने मेरे लिए प्रदर्शन समस्या को ठीक कर दिया, और पृष्ठ के निचले भाग में अच्छी तरह से काम किया, जहां यह उस ऊंचाई को सीमित करता है जो इसे उचित रूप से प्रदर्शित करता है। हालांकि, कांटे ने बहु-चयन कार्यक्षमता को काम करने से रोक दिया।

@geoffweatherall सच में? अच्छा! :D बहु-चयन की समस्या के बारे में, क्या काम करना बंद कर दिया? क्या आप कृपया example.jquery.html फ़ाइल आज़मा कर देख सकते हैं और मुझे बता सकते हैं कि क्या यह काम नहीं कर रही है? मेरे लिए यह ठीक लगता है।

हां, उदाहरण ठीक काम करते हैं (एफएफ 12)।

एकल चयन उदाहरण "पैनल" के साथ काफी सादे HTML पृष्ठ में है जो अतिप्रवाह छुपा का उपयोग करता है। हालांकि, बहु चयन उदाहरण कलरबॉक्स (http://www.jacklmoore.com/colorbox) का उपयोग करके बनाए गए "संवाद" में है - मुझसे मत पूछो क्यों, जब मैं आया तो प्रोजेक्ट ऐसा ही था। मुझे लगता है कि इसका इससे कुछ लेना-देना हो सकता है, मैं इस पर गौर करूंगा।

फोर्क हमारे एप्लिकेशन में कई स्थानों में कट-ऑफ समस्या को ठीक करता है, जिसमें बहु-चयन शामिल हैं जो कि कलरबॉक्स (http://www.jacklmoore.com/colorbox) के भीतर नेस्टेड नहीं हैं। मेरा मानना ​​​​है कि कलरबॉक्स के साथ समस्या चुने हुए की कोई गलती नहीं है। बढ़िया कांटा :-)

असल में मुझे नमूना पृष्ठ (example.jquery.html) में दिखाए गए कांटे के साथ एक समस्या मिली। बहु-चयन नियंत्रण के लिए, यदि आप विकल्पों की सूची खोलने के लिए नियंत्रण में क्लिक करते हैं, और फिर सूची को नेविगेट करने के लिए ऊपर तीर और नीचे तीर कुंजियों का उपयोग करते हैं, तो विकल्पों की सूची पृष्ठ के शीर्ष पर एक आश्चर्यजनक कदम रखती है। एकल चयन के लिए यह समस्या उत्पन्न नहीं होती है। FF12, क्रोम 18 और IE8 में परीक्षण किया गया।

@geoffweatherall शायद

.chzn-drop {
    z-index: 999999 !important;
}

या रंगबॉक्स अस्पष्टता को 0.1 पर सेट करने का प्रयास करें यह जांचने के लिए कि क्या आप ड्रॉपडाउन को कलरबॉक्स के नीचे देख सकते हैं।

दूसरी समस्या, चाबियों के साथ, मैं कुछ समाधान खोजने की कोशिश करूँगा। जिस प्रोजेक्ट पर मैं अभी काम कर रहा हूं, उसमें मैंने बहु-चयन का उपयोग नहीं किया, इसलिए मैंने लगभग इसका परीक्षण नहीं किया। एकल-चयन विकल्प पर अधिक ध्यान केंद्रित किया।

ठीक है, मैंने यह कोशिश की और मुझे ड्रॉप डाउन दिखाई दे रहा था, हालांकि स्थिति गलत है। वे टेक्स्ट बॉक्स से काफी नीचे गिर रहे हैं। यहाँ एक जिंग व्यवहार दिखा रहा है। http://screencast.com/t/c4PCIHC176RX

हाय गिल,

मैंने आपके संस्करण की कोशिश की है और यह काम कर रहा है! बहुत - बहुत धन्यवाद!
केवल एक छोटी सी चीज है जिसने काम करना बंद कर दिया है.. यह अक्षम_सर्च_थ्रेशोल्ड विकल्प है। खोज क्षेत्र गायब नहीं होगा।

क्या आपके पास कोई विचार है?

धन्यवाद!

कोई बात नहीं! मैं इसे स्वयं ठीक करने में कामयाब रहा, हालाँकि .. शायद आपको इसे कोड में भी बदलना चाहिए:

परिवर्तन:

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.container.addClass("chzn-container-single-nosearch");
    } else {
      this.container.removeClass("chzn-container-single-nosearch");
    }

प्रति

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.dropdown.addClass("chzn-container-single-nosearch");
    } else {
      this.dropdown.removeClass("chzn-container-single-nosearch");
    }

इस कांटे की क्या स्थिति है? क्या इसे मास्टर में मिला दिया गया है? या यह अभी भी परीक्षण में है?

एक और मुद्दा .. कांटा मेरे लिए काम करता प्रतीत होता है, लेकिन फ़ायरफ़ॉक्स में मुझे पृष्ठ के निचले भाग में ड्रॉपडाउन div दिखाई देता है। ऐसा लगता है कि नकारात्मक बाईं स्थिति इसे प्रदर्शन क्षेत्र से बाहर नहीं ले जाती है। शायद यह मेरे कुछ अन्य शैलियों के कारण है... सोचा। कोई विचार? इसका डिस्प्ले किसी पर सेट क्यों नहीं किया जा रहा है?

मैंने अपने मूल सुधार के लिए बहुत समय पहले एक पुल अनुरोध किया था लेकिन यह था
कभी स्वीकार नहीं किया (पता नहीं क्यों)।

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

गुरु, 7 जून 2012 को सुबह 6:44 बजे, बॉब आर्चर
उत्तर@reply.github.com
लिखा था:

एक और मुद्दा .. कांटा मेरे लिए काम करता प्रतीत होता है, लेकिन फ़ायरफ़ॉक्स में मुझे पृष्ठ के निचले भाग में ड्रॉपडाउन div दिखाई देता है। ऐसा लगता है कि नकारात्मक बाईं स्थिति इसे प्रदर्शन क्षेत्र से बाहर नहीं ले जाती है। शायद यह मेरे कुछ अन्य शैलियों के कारण है... सोचा। कोई विचार? इसका डिस्प्ले किसी पर सेट क्यों नहीं किया जा रहा है?

---

इस ईमेल का सीधे उत्तर दें या इसे GitHub पर देखें:
https://github.com/harvesthq/chosen/issues/86#issuecomment -6162299

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

Chosen.prototype.results_show में:

      this.dropdown.css({
        "top": dd_top + "px",
        "left": 0,
        "display": "block"
      });

Chosen.prototype.results_hide में:

      this.dropdown.css({
        "left": "-9000px",
        "display": "none"
      });

चुने हुए सीएसएस में:

.chzn-container .chzn-drop {
  position: static;
  display: none;
}

@ गिल , मैं सिर्फ आपके कांटे के लिए धन्यवाद कहना चाहता हूं, मैं इस बग की वजह से अपने प्रोजेक्ट के लिए चुना का उपयोग करने वाला था।

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

हे लोगों! यह जानना अच्छा है कि मेरा कांटा इस समस्या से कुछ लोगों की मदद कर रहा है ... :)

मुझे नहीं पता कि वे कोड बदलने या यहां प्रस्तावित कुछ समाधानों के साथ विलय करने की योजना बना रहे हैं। हम नहीं जानते कि क्या हम यह मान सकते हैं कि यह सभी मामलों के लिए सबसे अच्छा समाधान है। आइए परीक्षण करते रहें और शायद सभी परिवर्तनों के साथ एक पुल अनुरोध भेजें।

@geoffweatherall मैंने कुछ ऐसा कोड तय कर दिया है जो मुझे लगता है कि आपको कीबोर्ड की समस्या से

@PilotBob क्या आपको अभी भी उस जिंग से समस्या है? दूसरे मुद्दे के बारे में, मैंने फ़ायरफ़ॉक्स 12 पर example.jquery.html परीक्षण किया है और यह ठीक लगता है। हो सकता है कि आप सभी left:-9000px को display:none से बदलने का प्रयास कर सकें। मैं आपको बताने के लिए पर्याप्त कोड नहीं जानता, लेकिन चूंकि मैं display:block को results_show() पर सेट कर रहा हूं, यह आपकी मदद कर सकता है।

@pruimmartin आपके फिक्स के लिए धन्यवाद और उत्तर देने में बहुत लंबा समय लेने के लिए खेद है। मैंने पहले ही अपने कोड पर फिक्स को मर्ज कर दिया है!

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

@PilotBob मैं इस परियोजना पर विचार कर रहा हूँ: https://github.com/ivaynberg/select2
उनके पास एक ही अतिप्रवाह मुद्दा है, लेकिन मुझे लगता है कि वे संस्करण 3 पर बदलने की योजना बना रहे हैं।

@gil - अपने समाधान अच्छा काम करता है, लेकिन की चौड़ाई के साथ li.search-field रहता है पर तय 25px । दूसरे शब्दों में, जब मैं आपका उदाहरण पृष्ठ लोड करता हूं, तो मेनू body तत्व में खूबसूरती से जुड़ जाते हैं, लेकिन प्लेसहोल्डर टेक्स्ट और कोई भी टाइपिंग 25px चौड़ी तक सीमित होती है। वास्तव में, ऐसा लगता है कि search_field_scale विधि बिल्कुल भी नहीं है। क्या मुझसे कोई चूक हो रही है?

@rreusser मैंने search_field_scale विधि को हटा दिया है, क्योंकि इसका उपयोग केवल बहु चयन के लिए और स्थिति की सही गणना करने के लिए किया गया था। अब इस कांटे के लिए यह आवश्यक नहीं था। आप किस ब्राउज़र/संस्करण/ओएस का परीक्षण कर रहे हैं? मेरे लिए खोज क्षेत्र का आकार सही है example.jquery.html ।

@rreusser अरे, क्षमा करें। अब मैं देखता हूं कि क्या गलत है। मैं इसे आज बाद में ठीक करने का प्रयास करूंगा।

कोई बात नहीं, @गिल! शीघ्र उत्तर के लिए धन्यवाद! मुझे कुछ और प्रयोग करने की ज़रूरत है, लेकिन यह एक मनमानी तत्व से लगाव की अनुमति देने के लिए भी उपयोगी हो सकता है-जो कि बहुत छोटा होना चाहिए, मुझे लगता है। मेरे पास स्क्रॉलिंग div के अंदर एक चयन बॉक्स है, और जब आपका समाधान क्लिपिंग को रोकता है, तो मेनू स्क्रॉल करते समय div के साथ नहीं चलता है। मुझे लगता है कि जो कुछ आवश्यक है वह कहीं एक अतिरिक्त div है, लेकिन यह कुछ छेड़छाड़ करने वाला है।

@rreusser मैंने उस कमिट को वापस कर दिया है और उस समस्या को ठीक कर दिया है जिसे मैं अलग तरीके से ठीक करने की कोशिश कर रहा था। क्या आप कृपया पुनः प्रयास करें और मुझे बताएं कि क्या यह आपके लिए काम करता है?

और एक अलग तत्व से जुड़ने के बारे में, मैं इसे विन्यास योग्य बनाने के बारे में सोच रहा था। लेकिन आप अपनी स्क्रॉलिंग समस्या को थोड़ी सी कॉन्फ़िगरेशन के साथ हल कर सकते हैं। जब आपका <select /> आपके स्क्रॉलिंग div के प्रत्यक्ष बच्चे नहीं हैं, तो इसे आजमाएं:

$(".your-select").chosen({
    overflow_container: $(".scrolling-div")
});

लेकिन अगर आपका <select /> का मूल नोड आपका <div /> , तो यह आवश्यक नहीं होना चाहिए।

@गिल , क्या यह कांटा मास्टर में विलय हो जाएगा? या यह अभी भी परीक्षण में है? मुझे कांटा में कीबोर्ड नियंत्रण के साथ भी कोई समस्या थी, नीचे तीर कुंजी results_show या results_toggle विधियों को नहीं चलाती है। धन्यवाद :-)

@myfriendtodd मुझे अभी तक पता नहीं है, शायद मैं एक पुल अनुरोध भेज सकता हूं जब सभी को लगता है कि यह स्थिर है। लेकिन मुझे अभी भी लगता है कि इसे और अधिक परीक्षण की आवश्यकता है। मैं इस सप्ताह के अंत में कीबोर्ड की समस्याओं को ठीक करने का प्रयास करूँगा। धन्यवाद!

@myfriendtodd अरे, मुझे लगता है कि मैंने इसे ठीक कर लिया है। क्या आप कृपया इसे अपनी परियोजना पर परीक्षण कर सकते हैं? ;)

धन्यवाद @gil आपको

@gil आपके कांटे के लिए बहुत बहुत धन्यवाद। फिक्स ने मेरे लिए खूबसूरती से काम किया - कमाल!

हालांकि, मैं ट्विटर बूटस्ट्रैप में फिट होने के लिए चुनी गई शैली के लिए किकस्ट्रैप का उपयोग कर रहा हूं। इसके परिणामस्वरूप चुना गया इस फिक्स के साथ बहुत बुरी तरह टूटा जा रहा है - ड्रॉपडाउन की सामग्री पृष्ठ के निचले भाग में दिखाई देती है, अस्थिर - https://skitch.com/dyad/euys2/login । जहां तक ​​​​मुझे पता है कि सभी किकस्ट्रैप डिफ़ॉल्ट चुने हुए शैलियों को ओवर-राइट करता है।

स्टाइल में किए गए परिवर्तनों के लिए LESS फ़ाइल https://github.com/ajkochanowicz/Kickstrap/blob/master/extras/chosen/chosen.less पर पाई जा सकती है - क्या ऐसा कुछ स्पष्ट है कि आपके फिक्स संपादन बताते हैं कि यह क्यों है हो सकता है?

वाकई बहुत बहुत धन्यवाद।

हे लोगों,

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

https://github.com/gil/chosen/tree/new_version

@conatus क्या आप कृपया इस संस्करण के साथ भी प्रयास कर सकते हैं? शाखा "मास्टर" पर अंतिम संस्करण में सीएसएस फ़ाइल में कई बदलाव थे, यह संस्करण सिर्फ 3 लाइनों को बदलता है। किकस्ट्रैप के चुने हुए सीएसएस पर इन्हें बदलें:

• पंक्ति 4, "स्थिति: सापेक्ष;" से बदलें "स्थिति: स्थिर;" के लिए।
• "स्थिति: निरपेक्ष;" से लाइन 13 परिवर्तन "स्थिति: निश्चित;" के लिए।
• लाइन 128 पर, "बाएं: -9000px;" के नीचे एक नई लाइन "डिस्प्ले: कोई नहीं;" डालें।

मुझे आशा है कि यह काम करेगा! ;)

साथ ही, यह नया संस्करण हार्वेस्‍थक की मास्‍टर शाखा के साथ समन्‍वयित है!

क्षमा करें, मैंने पहले अनुवर्ती कार्रवाई नहीं की, लेकिन हम परियोजना के एक अलग हिस्से में आ गए और यह बहुत जल्दी दूर हो गया! मैं इसका परीक्षण करूंगा और मौका मिलते ही आपको बता दूंगा। आपके निरंतर प्रयास के लिए बहुत-बहुत धन्यवाद!

@gil - मैं आपके संस्करण का परीक्षण कर रहा हूं और जब यह बहुत अच्छा काम करता है, तो एक छोटी सी समस्या होती है: जब चुना गया एक निश्चित स्थिति तत्व के अंदर रखा जाता है, तो पृष्ठ को स्क्रॉल करने से ड्रॉपडाउन विस्थापित हो जाएगा। यह वास्तव में jQuery स्वत: पूर्ण के साथ भी एक मुद्दा है।

मैं इसके लिए केवल 2 संभावित समाधानों के बारे में सोच सकता हूं:
१) यदि चुना हुआ एक निश्चित-स्थित तत्व के अंदर रखा गया है, तो ड्रॉपडाउन को chzn-कंटेनर के अंदर रखा जाना चाहिए और साथ ही एक निश्चित स्थिति भी दी जानी चाहिए। शीर्ष स्थिति की गणना कंटेनर की निश्चित स्थिति से की जानी चाहिए
2) स्क्रॉल करते समय ड्रॉपडाउन स्थिति की पुन: गणना करें

तीसरा विकल्प यह है कि जब भी चयन एक निश्चित स्थिति कंटेनर में होता है तो ड्रॉपडाउन को ठीक कर दिया जाता है।

@ragulka @ChiperSoft मुझे समस्या दिखाई दे रही है ... बस यह सुनिश्चित करने के लिए, क्या यह jsfiddle आप जो कह रहे हैं उसे पुन: प्रस्तुत कर रहा है? http://jsfiddle.net/QY256/

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

मैं चुना बंद करने के बारे में सोच रहा था, जब कुछ स्क्रॉल होता है, क्योंकि स्क्रॉल को संभालने से कुछ अन्य छोटी समस्याएं होती हैं (जैसे कि जब आपका <select /> केवल आधा दिखाई देता है)।

@ragulka @ChiperSoft इसके अलावा, एक अस्थायी सुधार के रूप में, क्या आप लोग update_position विधि के अंदर, लाइन 640 को बदलने का प्रयास कर सकते हैं:

"top": (offset.top + dd_top) + "px",

प्रति:

"top": (offset.top + dd_top - $(window).scrollTop()) + "px", ?

@gil हाँ और नहीं - आपके द्वारा प्रदान किया गया jsfiddle समस्या दिखाता है, लेकिन मेरे लिए यह तब दिखाई दिया जब मैं शरीर को स्क्रॉल कर रहा था (मेरे निश्चित तत्व में कोई स्क्रॉलबार नहीं था)। आपके jsfiddle में समस्या तब प्रकट होती है जब मैं निश्चित तत्व की सामग्री को स्क्रॉल कर रहा होता हूं, लेकिन शरीर को स्क्रॉल करते समय नहीं।

@ragulka मुझे पता है कि यह सबसे अच्छा समाधान नहीं है, लेकिन मुझे लगता है कि मैंने इसे यहां ठीक कर दिया है। क्या आप इसे आजमा सकते हैं? लाइन 640 में परिवर्तन करें, जैसा मैंने कहा, और इस तरह चुना लागू करें:

$(".your-select").chosen({
    overflow_container: $(".your-fixed-div").add( document )
});

इसे div पर और document पर स्क्रॉल को संभालना चाहिए, और स्थिति को ठीक करना चाहिए।

लेकिन जैसा मैंने कहा, मुझे लगता है कि जब उपयोगकर्ता कुछ स्क्रॉल करता है तो चुना हुआ छिपाने के लिए मैं इसे बाद में बदल दूंगा।

यह एक चुना हुआ बग नहीं हो सकता है, लेकिन मैंने चुने हुए के प्रतिस्थापन में एक बूंद के रूप में चयन 2 पर स्विच किया और समस्या किसी भी कामकाज की आवश्यकता के बिना चली गई।

उसके लिए बहुत बहुत धन्यवाद।

बीच के समय में किकस्ट्रैप अपडेट किया गया - https://github.com/ajkochanowicz/Kickstrap/blob/beta/assets/Kickstrap/apps/chosen/chosen.css। आपकी नई शाखा शानदार ढंग से काम करती है, हालांकि किकस्ट्रैप सीएसएस में आपके द्वारा सुझाए गए परिवर्तनों का कोई प्रभाव नहीं पड़ता है। क्या होता है ड्रॉप डाउन अब प्रकट नहीं होता है। कोई विचार? बहुत - बहुत धन्यवाद।

धन्यवाद @गिल!!! आपकी शाखा (https://github.com/gil/chosen/tree/new_version) ने इस विशेष मुद्दे के साथ मेरी समस्या का समाधान किया।

सारी सलाह के लिए धन्यवाद। मैंने ड्रॉपडाउन को बूटस्ट्रैप v2.1.1 मोडल और चुने हुए v0.9.11 के साथ काम करने के लिए ऊपर दिए गए सुझावों में कुछ मामूली संशोधन किए। पृष्ठ को स्क्रॉल करने के बाद इसे फिर से खोलने के बाद .chzn-drop को सही ढंग से स्थापित करने के लिए छोटे बदलावों की आवश्यकता थी।

आशा है कि यह दूसरों की मदद करता है।

सीएसएस

.modal .chzn-container .chzn-drop {
  position:fixed;
}

जावास्क्रिप्ट

Chosen.prototype.results_show = function() {

      var self = this;

      // hide .chzn-drop when the window resizes else it will stay fixed with previous top and left coordinates
      $(window).resize(function() {
        self.results_hide();
      });

      var dd_top;
      if (!this.is_multiple) {
        this.selected_item.addClass("chzn-single-with-drop");
        if (this.result_single_selected) {
          this.result_do_highlight(this.result_single_selected);
        }
      } else if (this.max_selected_options <= this.choices) {
        this.form_field_jq.trigger("liszt:maxselected", {
          chosen: this
        });
        return false;
      }
      dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
      this.form_field_jq.trigger("liszt:showing_dropdown", {
        chosen: this
      });

      if($('.modal.in').length) {
        // when in a modal get the scroll distance and apply to top of .chzn-drop
        var offset = this.container.offset();
        var scrolly = parseInt($(window).scrollTop(), 10);
        scrolly = scrolly < 0 ? 0 : scrolly;
        var toppy = offset.top+ dd_top - scrolly;
        this.dropdown.css({
          "top": toppy + "px",
          "left": offset.left + "px"
        });
      } else {
        // proceed as normal
        this.dropdown.css({
          "top": dd_top + "px",
          "left": 0
        });
      }

      this.results_showing = true;
      this.search_field.focus();
      this.search_field.val(this.search_field.val());
      return this.winnow_results();
    };

तो मैं चुना 0.9.11 के साथ थोड़ा सा खेल रहा था और मैंने उन परिवर्तनों की पहचान की जिन्हें मुझे चुना गया था ...

मैं एक भारी संशोधित jQueryUI संवाद के अंदर चुना का उपयोग कर रहा हूं जो खींचने योग्य है और इसमें अतिप्रवाह के साथ अधिकतम ऊंचाई है: स्क्रॉल करें।

जैसा मैं चाहता हूं वैसा व्यवहार करने के लिए चुना पाने के लिए मैंने ".chzn-container .chzn-drop" को " स्थिति: निश्चित " में बदल दिया और " प्रदर्शन: कोई नहीं " जोड़ा। फिर "Chosen.prototype.results_hide" में मैंने " display:none " को "this.dropdown.css" में जोड़ा...

this.dropdown.css({
    "left": "-9000px",
    "display": "none"
});

और "Chosen.prototype.results_show" में मैंने "this.dropdown.css" की सामग्री को " display:block " से बदल दिया।
.chzn-drop div की सही स्थिति प्राप्त करने के लिए मैंने jQueryUI स्थिति फ़ंक्शन जोड़ा है।

this.dropdown.css({
    "display": "block"
}).position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

"Chosen.prototype.search_field_scale" में बदलाव...

return this.dropdown.css({
    "top": dd_top + "px"
});

... प्रति ...

return this.dropdown.position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

अब मेरे पास केवल एक ही समस्या बची है:

जब कोई संवाद को चारों ओर ले जाना शुरू करता है तो मुझे चुने गए ड्रॉप को बंद करने के लिए jQuery UI डायलॉग ड्रैग इवेंट्स को सुनने की आवश्यकता होती है। मैंने इसे पहले ही हासिल कर लिया है लेकिन कोड बहुत गंदा है :-)

क्या इस शाखा से गैर-तुच्छ सुधार का कोई मौका है https://github.com/gil/chosen/commits/new_version GWTChosen में पोर्ट हो जाता है?
GWTChosen कमाल का है। हालाँकि, वर्तमान स्थिति में इसका उपयोग LayoutPanels के साथ बिल्कुल भी नहीं किया जा सकता है।

चुने हुए पुस्तकालय में एक नई सुविधा जोड़ने के बारे में जहां सूची टेक्स्ट फ़ील्ड के ऊपर केवल अलग या एक नई कक्षा जोड़कर प्रस्तुत की जाएगी? इस तरह स्क्रिप्ट को रैपिंग ओवरफ्लो के बाहर सूची प्रस्तुत करने की आवश्यकता नहीं है अतिप्रवाह के रूप में एक मुद्दे के रूप में नहीं मानता

+1 क्लिकरको के सुझाव के लिए।

जैसे @sillysachin मैं ओवरफ़्लो: छुपा और चुना लिस्टबॉक्स के साथ एक ही समस्या है: /

क्या किसी को इसके लिए कोई फिक्स पता है? @sillysachin क्या आप यहां पोस्ट करने के बाद से कुछ लेकर आए हैं?

अग्रिम में टीएनएक्स :)

हमने पैरेंट कंटेनर से ड्रॉपडाउन डिव को खींचकर इसे एड-हॉक किया है। दुर्भाग्य से मैं रिलीज क्रश के साथ बह गया हूं और इसे यहां सबमिट करने से पहले पैच को साफ करने में समय लगेगा।

https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983 में यह कमिट इसे यथोचित रूप से ठीक करता है। यह अपेक्षाकृत अद्यतित है, लेकिन मैंने इसे केवल jQuery के लिए किया है।

@robmcguinness मुझे इसे काम करने के लिए कुछ संशोधित करना पड़ा। हालाँकि, यह एक बग बनाता है। जहां आप ड्रॉपडाउन को बंद नहीं कर सकते।

 Chosen.prototype.results_show = function() {

 this.dropdown.css({
      "display": 'block'
    });

  var dd_top;
  $(window).resize(function() {
    this.results_hide();
  });

  if (this.is_multiple && this.max_selected_options <= this.choices_count()) {
    this.form_field_jq.trigger("chosen:maxselected", {
      chosen: this
    });
    return false;
  }

  dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
  this.container.addClass("chosen-with-drop");
  this.form_field_jq.trigger("chosen:showing_dropdown", {
    chosen: this
  });

  if($('.modal.in').length) {
    // when in a modal get the scroll distance and apply to top of .chzn-drop
    var offset = this.container.offset();
    var scrolly = parseInt($(window).scrollTop(), 10);
    scrolly = scrolly < 0 ? 0 : scrolly;
    var toppy = offset.top+ dd_top - scrolly;
    this.dropdown.css({"top": toppy + "px","left": offset.left + "px"});
  } else {
    // proceed as normal
    this.dropdown.css({
      "top": dd_top + "px",
      "left": 0
    });
  }




  this.results_showing = true;
  this.search_field.focus();
  this.search_field.val(this.search_field.val());
  return this.winnow_results();
};


Chosen.prototype.results_hide = function() {
  if (this.results_showing) {

    this.dropdown.css({
      "display": 'none'
    });

    this.result_clear_highlight();
    this.container.removeClass("chosen-with-drop");
    this.form_field_jq.trigger("chosen:hiding_dropdown", {
      chosen: this
    });
  }
  return this.results_showing = false;
};

और मुझे सीएसएस में चौड़ाई जोड़नी पड़ी, अन्यथा यह साइट की 100% चौड़ाई तक जाएगी।

.मोडल। चुना-कंटेनर। चुना-ड्रॉप {
स्थिति: निश्चित;
चौड़ाई: 300 पीएक्स;
}

मैं उपरोक्त कोड के साथ मुद्दों को ठीक करने में सक्षम था। संस्करण 1 के साथ संगत। हालांकि, काम करने के लिए मेरा एक रिग अधिक है। लेकिन अभी तक यह सही काम कर रहा है। आखिरी मुद्दा जो मैं देख रहा हूं वह ब्राउज़र का आकार बदल रहा है, वर्तमान मॉड काम नहीं करता है।

किसी को भी पता है कि क्या इस समस्या के संभावित सुधारों को जल्द ही मास्टर शाखा में विलय कर दिया जाएगा? यह मेरे लिए एक डील-ब्रेकर है =/.

हम Select2 का उपयोग करने के लिए आगे बढ़े ... इसमें और भी विशेषताएं हैं।

गुरु, 19 दिसंबर, 2013 को पूर्वाह्न 11:24 बजे, डेनियल हॉफमैन बर्नार्ड्स <
सूचनाएं@github.com> ने लिखा:

किसी को भी पता है कि क्या इस समस्या का कोई संभावित समाधान होने वाला है
जल्द ही मास्टर शाखा में विलय? यह मेरे लिए एक डील-ब्रेकर है =/.

-
इस ईमेल का सीधे उत्तर दें या इसे Gi tHub पर देखेंhttps://github.com/harvesthq/chosen/issues/86#issuecomment -30942420
.

धन्यवाद पायलटबॉब, चुना जाता है अब रखरखाव नहीं किया जाता है? यदि ऐसा है तो आप दस्तावेज़ीकरण को अद्यतन करना चाहेंगे।

यह मेरा प्रोजेक्ट नहीं है। मैं इसका "उपयोगकर्ता" था। कई मुद्दों के कारण हमने पाया
एक विकल्प।

गुरु, 19 दिसंबर, 2013 को पूर्वाह्न 11:53 बजे, डेनियल हॉफमैन बर्नार्ड्स <
सूचनाएं@github.com> ने लिखा:

धन्यवाद पायलटबॉब, चुना जाता है अब रखरखाव नहीं किया जाता है? यदि ऐसा है तो आप शायद
दस्तावेज़ीकरण को अद्यतन करने के लिए।

-
इस ईमेल का सीधे उत्तर दें या इसे Gi tHub पर देखेंhttps://github.com/harvesthq/chosen/issues/86#issuecomment -30945150
.

@DanielHoffmann चुना अभी भी सक्रिय रूप से बनाए रखा है। Select2 मूल रूप से चुना का एक कांटा था, लेकिन तब से यह काफी दूर हो गया है कि यह अपनी बात है।

चुना गया जानबूझकर सरल रखा गया है - इसका उद्देश्य select s के लिए ड्रॉप-इन प्रतिस्थापन होना था, इसलिए यह बहुत सारी जटिल सुविधाओं और कॉन्फ़िगरेशन से बचा जाता है। Select2 ने विपरीत मार्ग लिया, और कई, कई सुविधाएँ और कॉन्फ़िगरेशन जोड़े - यह आप पर निर्भर है कि आप इनमें से किस दर्शन को अधिक महत्व देते हैं।

इस _specific_ मुद्दे के लिए, यह दुर्भाग्य से बस यही है: एक मुद्दा, ठीक नहीं। यदि कोई इसे ठीक करने के लिए पुल अनुरोध प्रस्तुत करता है, तो इसे विलय के लिए माना जाएगा। हालांकि, ओएसएस किसी भी अनुरक्षक का प्राथमिक काम नहीं है - वे इस पर तब काम करते हैं जब वे अपनी पूर्णकालिक नौकरी के आसपास हो सकते हैं। इसलिए, हमेशा की तरह, "पुल अनुरोध स्वीकार किए जाते हैं" यदि आप इसे स्वयं ठीक करने का प्रयास करना चाहते हैं!

यह समस्या कब ठीक होने वाली है? यह बहुत पुराना है लेकिन बहुत सारी परियोजनाओं के लिए महत्वपूर्ण है! कृपया इसे जल्द से जल्द संबोधित करें!

धन्यवाद!

चुने हुए कांटों में बहुत सारे सुधार हैं तो उन सुधारों में से किसी एक का उपयोग क्यों न करें?

@domnulnopcea इसके लिए कभी कोई पीआर फिक्स सबमिट नहीं किया गया है, केवल डुप्लिकेट रिपोर्ट। यदि आपके पास इसे ठीक करने का कोई विचार है, तो कृपया एक पीआर भेजें। इसके बाद हम इसकी समीक्षा करेंगे। वर्तमान में, मुझे इस विशेष समस्या को ठीक करने वाले किसी भी कांटे की जानकारी नहीं है

मेरे पास इसके लिए एक फिक्स है, यह एक साफ कांटा नहीं है, इसे किसी अन्य भंडार में दफनाया गया है और यह केवल jQuery संस्करण पर है। (नहीं, मुझे अपने आप पर गर्व नहीं है)

यह ड्रॉप डाउन एलिमेंट को बॉडी एलिमेंट में जोड़कर काम करता है और पेज को स्क्रॉल या आकार बदलने पर बिल्कुल अपनी स्थिति सेट करता है। यह भी काम करता है कि ड्रॉप डाउन फ़ील्ड के ऊपर या नीचे होना चाहिए और यह कितना लंबा होना चाहिए (इसलिए इसे पृष्ठ से नहीं काटा जाना चाहिए)।

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

https://gist.github.com/msaspence/11032254

@stof https://github.com/tompaton/chosen के बारे में क्या

प्रतिबद्ध: https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983

@domnulnopcea इसे कभी भी चुना गया AFAIK में शामिल करने के लिए सबमिट नहीं किया गया है। हम इस पर किए गए सभी कार्यों की जांच करने के लिए सभी कांटे नहीं खोल सकते हैं। हम अपने खाली समय पर चुना पर काम कर रहे हैं, इसलिए हम कई रेपो में हजारों प्रतिबद्धताओं की जांच करने के लिए सप्ताह समर्पित नहीं कर सकते हैं कि वे क्या कर रहे हैं

@stof हम आपके काम की बहुत सराहना करते हैं। मैं इसे अपने स्वयं के प्रोजेक्ट (www.ubirmi.com) पर उपयोग करता हूं, लेकिन अब जब मैंने आपको एक प्रतिबद्धता के लिए एक लिंक दिया है, तो क्या आप उन परिवर्तनों को देखने और उन्हें आधिकारिक चुने हुए भंडार में लागू करने के लिए इतने दयालु होंगे?

बहुत - बहुत धन्यवाद

यह देखते हुए कि इसे सीधे लागू नहीं किया जा सकता है (11 महीनों से कोड बहुत बदल गया है), इसके लिए कुछ समय की आवश्यकता होगी (और यह सुनिश्चित करने के लिए कि यह ठीक से काम करता है, इसके परीक्षण की भी आवश्यकता है)। तो मैं इसे अभी नहीं कर सकता

@stof इसे करने के बारे में सोचने के लिए धन्यवाद! मैं इसकी सराहना करता हूं!

@domnulnopcea यदि यह आपके लिए महत्वपूर्ण है तो आप परिवर्तनों पर क्यों नहीं जाते और स्वयं एक पुल अनुरोध बनाते हैं। आखिर यही तो ओपन सोर्स की खूबसूरती है

@msaspence मैं करूंगा लेकिन मैं फ्रंटएंड डेवलपर नहीं हूं! मैं जेएस और क्लाइंट साइड स्टफ के लिए बहुत अभ्यस्त नहीं हूं

हम Select2 पर चले गए क्योंकि यह AJAX डेटा पुनर्प्राप्ति की अनुमति देता है। आप लोग इसे देखना चाहेंगे।

मुझे लगता है कि इस स्तर पर हर कोई Select2 में चला गया है - क्या चुना का उपयोग करने का कोई फायदा है?

मेरे लिए पूरी तरह से पायलटबॉब समाधान काम किया!

मैंने इसे अपने कोड पर जोड़ा:

$ (दस्तावेज़)। तैयार (फ़ंक्शन () {
$(.chzn-select").on(" liszt:showing_dropdown ", function() {
$ (यह)। माता-पिता ("div")। सीएसएस ("अतिप्रवाह", "दृश्यमान");
});
}

आपका बहुत बहुत धन्यवाद!!!

समस्या यह है कि विकल्पों की सूची की स्थिति absolute , यह मूल कंटेनर का विस्तार नहीं करती है। एक समाधान जो मैं प्रस्तावित करता हूं उसे float: left | right में बदल दें क्योंकि यह माता-पिता का विस्तार कर सकता है, अगर मैं clear:both साथ एक डोम ऑब्जेक्ट जोड़ता हूं

मैंने इसे अपने सीएसएस में निम्नलिखित के साथ हल किया (jquery-ui संवाद के साथ प्रयोग किया गया):

#clone-budget-dialog {overflow: visible;}

@grduggan क्या आप पुस्तकालय के सीएसएस में समाधान का प्रस्ताव
मुझे लगता है कि आपका समाधान मान्य है। एक धक्का-अनुरोध करें!
+1

पहले कभी ऐसा नहीं किया। मुझे जांच करनी होगी। सीएसएस में होना अच्छा होगा।

मुझे एक समान समस्या दिखाई देती है जब चयन बॉक्स पृष्ठ के अंत के करीब होता है। मूल चयन बॉक्स इसे नीचे छोड़ने के बजाय इसे खोलने का हल करता है। क्यों नहीं?

अतिप्रवाह: दृश्यमान; कंटेनर के div पर मेरे लिए काम किया! धन्यवाद।

आपको हमेशा अतिप्रवाह की आवश्यकता नहीं होती है

&:इससे पहले,
&:बाद में {
विषय: " "; // 1
प्रदर्शन: टेबल; // 2
}
&:बाद में {
दोनों को साफ करो;
}

बूटस्ट्रैप में क्लीयरफिक्स क्लास इस तरह काम करती है

मैंने सीएसएस को संशोधित किया (नीचे देखें)। मेरे परिदृश्य के लिए काम करने लग रहा था।

चुना हुआ कंटेनर
स्थिति: रिश्तेदार; /_कंटेनर में अतिप्रवाह कटऑफ से बचने के लिए निरपेक्ष से बदला गया_/
सर्वोच्च 100%;
बाएं: -9999px;
जेड-इंडेक्स: 1010;
चौड़ाई: 100%;
सीमा: 1px ठोस #aaa;
सीमा-शीर्ष: 0;
पृष्ठभूमि: #fff;
बॉक्स-छाया: 0px 4px 5px आरजीबीए (0,0,0,0.15);
}

.चुना-कंटेनर .चुना-परिणाम {
रंग: #444;
स्थिति: रिश्तेदार;
अतिप्रवाह-एक्स: छिपा हुआ;
अतिप्रवाह-वाई: ऑटो;
मार्जिन: 0 4px 4px 0;
पैडिंग: 0 0 0 4px;
अधिकतम-ऊंचाई: 200px; /_240px_/ से बदला गया
-वेबकिट-अतिप्रवाह-स्क्रॉलिंग: स्पर्श करें;

/*Added to clearfix because we changed the chosen-drop to a relative position*/
&:before,
&:after {
    content: " "; // 1
    display: table; // 2
}
&:after {
    clear: both;
}

}

fieldset तत्व में चयन (और चुना) को लपेटने से वेबकिट ब्राउज़र में अवांछित प्रभाव भी उत्पन्न हो सकते हैं (यानी जब माता-पिता के पास overflow: hidden तो काटना)।
ऐसा इसलिए है क्योंकि वेबकिट डिफ़ॉल्ट रूप से फ़ील्डसेट में min-width: -webkit-min-content; जोड़ता है।

इससे मेरे लिए समस्या हल हो गई:

fieldset { min-width: 0; }

@chassq हम्म आपका समाधान मेरे लिए काम नहीं करता है, .. यह स्क्रीनशॉट देखें:

मेरे पास चुने हुए चयनों के आसपास एक div है

  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;

उन सभी को धन्यवाद जिन्होंने पहले ही position: fixed साथ समाधान दिया है

यहाँ समाधान के साथ एक jsfiddle है (चुने हुए CSS वर्गों को अधिलेखित कर देता है):
http://jsfiddle.net/jwbL8utx/1/ ;)

मुझे अभी भी 1 समस्या है, नीचे स्क्रॉल करते समय (अधिकतम-ऊंचाई का उपयोग करके) चुने हुए में एक ऑफसेट होता है, जैसा कि आप नीचे स्क्रॉल करते समय और दूसरे चुने हुए को खोलते समय देख सकते हैं:

http://jsfiddle.net/jwbL8utx/2/

इस तरह मैंने इसे हल किया:

http://jsfiddle.net/0w4a4dq5/1/

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

@typologist आपके उत्कृष्ट समाधान के लिए धन्यवाद।
आपके JS में दो छोटी-मोटी बग हैं जिनका मैं उल्लेख करना चाहूंगा, हालांकि:
लाइन 51 में, यह होना चाहिए

'top': y - $(document).scrollTop()

अन्यथा पॉपअप को कुछ शर्तों के तहत विस्थापित किया जा सकता है

लाइन 23 में, उपयोग करने के बजाय

$('.chosen-container')

घटनाओं को बांधने के लिए, मुझे लगता है कि इसका उपयोग करना बेहतर होगा

$chosenSelect.next('.chosen-container')

एकाधिक बाइंड से बचने के लिए यदि फ़ंक्शन को अलग-अलग चुने गए() विजेट्स को ठीक करने के लिए एक से अधिक बार कॉल किया जाता है।

कृपया मुझे बताएं कि क्या चुने गए v1.4.2 के लिए कोई समाधान है?

.chosen-container.chosen-with-drop .chosen-drop {
    position: relative;
}

overflow-y: visible

इसे पैरेंट डिव में जोड़ें जिसमें लेआउट है। मेरे मामले में यह एक मॉडल डायलॉग सब डिव था जिसमें _overflow-y: auto_ था और इसे _overflow-y:visible_ से बदलना मेरे लिए काम करता था।

क्या इस समस्या का अभी तक कोई समाधान है?

इस परियोजना में आपकी प्रतिक्रिया है:
http://jsbin.com/finufihaji/edit?html

थोड़ा खोजना और परीक्षण करना सबसे बुनियादी समाधान है।

मुझे .chosen-drop और .chosen-results को ओवरराइड करना था और दोनों के लिए एक निश्चित ऊंचाई निर्धारित करना था ताकि सभी विकल्प चयन योग्य हों और पैरेंट डिव ओवरफ्लो निर्देश से प्रभावित न हों

कम से कम यह मेरे लिए काम करता है और मेरे अधिकांश चुने हुए क्षेत्र में केवल 3 या 4 विकल्प हैं। केवल 1 (जिसे छिपाया जा रहा है) के पास लगभग 12 है और निकट भविष्य में बढ़ सकता है।

मैंने निम्नलिखित को मूल div पर लागू किया जिसमें अतिप्रवाह था: छुपा हुआ

.profile-content { /* Hack to stop profile-content from cropping Chosen dropdown */ padding-bottom: 100px; margin-bottom: -100px; }

स्रोत: ढेर अतिप्रवाह

@doowruc ग्रेट हैक!

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

.ui-dialog-content{
    overflow:visible !important;
 }

मेरे लिए काम किया।

मुझे पता है कि मैं अभी भी इससे जूझ रहा था। यहां एक फिडल है जो तत्व को शरीर में ले जाने और स्क्रॉलिंग के साथ भी पूर्ण स्थिति को विश्वसनीय रूप से सेट करने का विकल्प दिखाता है।

https://jsfiddle.net/phil_ayres/gvn8bkaL/

https://github.com/R1p8p8e8r/chosen
मुझे लगता है कि मेरा समाधान आपकी मदद करेगा