Chosen: يتم "قطع" المختار عند وضعه في منطقة بها "تجاوز: مخفي".

هذه هي نفس المشكلة رقم 59

أليس هذا أمرًا لا مفر منه نظرًا لأن عنصر الحاوية جيد "overflow: hidden" فهذه هي الطريقة التي تعمل بها CSS. الطريقة الوحيدة للتغلب على ذلك هي عرض القائمة المنسدلة خارج الحاوية ثم استخدام تحديد الموضع المطلق.

نعم ، أنا أتفق مع dfischer. لا يبدو أنها قضية مختارة. حسب التعريف ، تحدد خاصية overflow ما يحدث إذا تجاوز المحتوى حدود العنصر. إذا كنت لا تريد إخفاء _overflow_ ، فقم بتغيير تلك الخاصية.

بينما صحيح ، أعتقد أن هذه حالة استخدام شائعة مع مربعات الحوار. (خاصة حوار jquery)

إنها حالة استخدام شائعة ، ولكن بناءً على هذه البطاقة ، كما ذكرت سابقًا ... يجب تغيير الهيكل والتنفيذ بالكامل إذا كنت ترغب في تحقيق ذلك.

أنت مطالب بالعرض خارج الحاوية حتى يحدث ذلك ثم استخدام jQuery / JS magic لمعرفة الموضع بالنسبة إلى المشغل.

لا تعتمد حالة jQuery Dialog على عنصر الحاوية ، لذا فهي تستخدم فقط تحديد الموضع بناءً على أبعاد المركز وعرض مربع الحوار.

هذه مشكلة CSS ، وليست مشكلة مختارة. لا تضع الفائض: مخفي على الحاوية. سيتعين عليك استخدام تقنية أخرى لمسح العوامات الموجودة أسفلها إذا كان هذا هو ما تفعله.

لقد كتبت للتو بعض الكود الذي أعتقد أنه يفعل ما تبحث عنه:

$ .fn.extend ({
المختار: الوظيفة (البيانات ، الخيارات) {
إذا ($ (this) .parent (). css ("overflow") == "hidden") {
// الحصول على تعويضات بين الوالد والطفل لحساب الفرق
// عندما ندفع إلى المطلق
var y = $ (this) .offset (). top - $ (this) .parent (). offset (). top،
x = $ (this) .offset (). left - $ (this) .parent (). offset (). left،
$ t1 = $ ("<div />"، {
css: {
"الموضع": "نسبي"،
"الارتفاع": $ (this) .parent (). height،
"العرض": $ (this) .parent (). width
}
}) ،
$ t2 = $ ("<div />"، {
css: {
"الموضع": "مطلق"،
"أعلى": ص ،
"اليسار": x
}
}) ؛
$ t1.insertBefore ($ (this) .parent ())؛
$ (this) .parent (). appendTo ($ t1)؛
$ t2.appendTo ($ t1) ؛
$ (هذا) .appendTo ($ t2) ؛
}
إرجاع $ (this) .each (الوظيفة (input_field) {
إذا (! ($ (هذا)). hasClass ("chzn-done")) {
إرجاع المختار الجديد (هذا ، البيانات ، الخيارات) ؛
}
}) ؛
}
}) ؛

(راجع للشغل أنا جديد على جيثب اعتبارًا من اليوم ، لذا إذا كان هناك مكان مختلف يجب أن أقوم بإرسال الرمز إليه ، فأعلمني بذلك)

يقوم هذا الرمز بما يلي بفاعلية:

1. احسب الإزاحة بين مربع التحديد والمربع الرئيسي.
2. قم بإنشاء div أصلي بنفس أبعاد الفائض المخفي وضبطه على نسبي.
3. قم بإنشاء أصل لمربع التحديد لإنشاء العنصر على أنه مطلق باستخدام إزاحة x و y من الخطوة 1.
4. أدخل أصلًا جديدًا قبل أصل التحديد ، وألحق div overflow داخل الوالد الجديد ، وألحق ذلك الأصل المحدد الجديد بداخل الوالد الرئيسي ، وألحق التحديد بالوالد الفرعي الجديد.

فكرة مثيرة للاهتمام ماثيو ، لكنني أعتقد أن هذا لن ينجح في مربع حوار jQuery-UI ، أليس كذلك؟

من المرجح أن عنصر القائمة المنسدلة (.chzn-drop) يجب سحبه من حاوية .chzn وحتى نص المستند ...

فقط أضف نمطًا إلى الصفحة وستكون إجابتك نعم:

.ui-الحوار { overflow: مرئي ؛ }

لا يناسبني ، لأنني أقوم بإنشاء صفحاتي باستخدام div كأعمدة (على عكس td والجداول).
أستخدم " overflow: hidden " لمنع المحتوى الجامح من تدمير divs المجاورة.

أفترض أن العديد منكم يستخدم نفس الهيكل.

لن ينجح ذلك ، حيث تم تعيين مربعات الحوار على تجاوز: تلقائي حتى يتمكنوا من ذلك
لديك أشرطة التمرير إذا لزم الأمر.

يوم الجمعة ، 29 تموز (يوليو) 2011 الساعة 11:47 مساءً ، ethaniel
[email protected]
كتب:

لا يناسبني ، لأنني أقوم بإنشاء صفحاتي باستخدام div كأعمدة (على عكس td والجداول).
أستخدم " overflow: hidden " لمنع المحتوى الجامح من تدمير 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 كيف تتصرف ، لا توجد مساحة كافية لـ
القائمة المنسدلة "داخل" مربع الحوار ، بحيث يتم تمريرها وإخفائها كملف
نتيجة. هذا هو clunky جدا للاستخدام وقبيح وليس كيف بنيت في
حدد عناصر التحكم في العمل (تظهر في الجزء العلوي من المحتوى ، بغض النظر
مدى عمقها أو ما هو نمط الفائض.)

تُظهر اللقطات 3 و 4 عملي الحالي ، وهو وضع الكل
كومة من المساحة أسفل القائمة المنسدلة. هذا أيضًا قبيح ويصنع الشكل
أصعب في الاستخدام.

لذا ، للتلخيص ، النقطة الحقيقية هي أن عناصر التحكم الأصلية ليست كذلك
يقتصر على الحاوية الأصلية الخاصة بهم وإذا كان ذلك ممكنًا ، فسيتم اختيارهم
لا ينبغي أن يكون التحكم في التحديد المحسّن أيضًا ، نظرًا لأنه مصمم ليكون كذلك
بديل عن السيطرة الأصلية.

يمكن القيام بذلك نظريًا ولكنه يتطلب نظام بناء / تحديد موقع مختلف تمامًا بواسطة المكون الإضافي المختار. سيكون هذا التغيير واسع النطاق وسيتطلب إعادة كتابة حوالي 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"
});

أنا أواجه هذه المشكلة بنفسي أثناء محاولتي جعل Chosen يعمل داخل Wijmo / jQuery UI Dialog. قد أكون بعيدًا عن الدوري هنا ، لكن ألا يوجد حل بسيط إلى حد ما لجعل جزء "القائمة المنسدلة" يحتوي على "display: none" أثناء الإخفاء ، ثم "display: block" عند عرضه؟ ستستمر في تحمل أشرطة التمرير عندما تكون القائمة المنسدلة مفتوحة ، ولكن ربما يكون هذا أفضل من وجود أشرطة التمرير دائمًا.

الإصلاح (تم اختباره في Chrome 13 و Firefox 7 و IE 9):

في selected.css:

.chzn-container .chzn-drop {
الموقف: ثابت ؛
}

وفي Chosen.prototype.results_show

var offset = this.container.offset () ،
this.dropdown.css ({
"أعلى": (offset.top + dd_top) + "px" ،
"اليسار": offset.left + "px" ،
"العرض محجوب"
}) ؛

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

هذه هي الأشياء ، حسن التفكيرlevushka. تم الحل الآن في فرعي: https://github.com/tompaton/chosen/commit/fda07051161f3fffe6049362b6c9b66ffbe857d1

حسنًا ، الأمر أكثر تعقيدًا من ذلك بقليل. لم يعمل الإصلاح أعلاه إذا تم تمرير الصفحة.

لقد قمت بتحديث الريبو الخاص بي بمجموعة من التغييرات التي تعمل على إصلاحها ، يتم وضع القائمة المنسدلة بشكل صحيح الآن ، ولكن إذا تم تمرير الصفحة أثناء ظهور القائمة المنسدلة ، فلن تتحرك كما هو متوقع. هذا مزعج ، لكنه ليس سدادة عرض.

قد يحل iOS 5 هذا الأمر ، لكن iOS لا يدعم حاليًا الوضع: تم إصلاحه بنفس الطريقة التي تعمل بها متصفحات سطح المكتب. يعمل Chosen بشكل رائع على سطح المكتب ، لكن هذا قد يحد من استخدامه على متصفحات الجوال سيئة التصميم ...

أنا لا أختار Apple هنا فقط ، فالإصدار الأقدم من Android يفتقر أيضًا إلى دعم الموضع: ثابت.

اعتبارًا من jQuery 1.7 (لم يتم إصداره بعد ، ولكن في الإصدار المُرشح) لديهم اختبار مدمج لدعم CSS Position Fixed:
http://bugs.jquery.com/ticket/6809

قد يكون من المفيد اكتشاف jQuery 1.7 واستخدام نتائجه ، أو نسخ التعليمات البرمجية الخاصة بهم والحصول على نتيجة منفصلة بخلاف ذلك.

+1 للوضع في نهاية عنصر الجسم.

تحقق من أداة jquery "الإكمال التلقائي". حل جيد جدًا لهذه المشكلة:

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

بالمناسبة البرنامج المساعد الرائع.

واجهت هذه المشكلة في الغالب في متصفحات webkit. IE فقط يتحول إلى ذهني مع المختار ، لذلك قمت بتعطيله إذا كان ie. باستخدام jquery ، أتحقق مما إذا كان المتصفح من نوع webkit ، وقم بتعديل تجاوز div الذي يحتوي على chosens الخاص بي كما يلي:

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

حيث هذا هو div الذي يحتوي على chosens.

+ 1levushka و @ compaton ليست مثالية ، لكنها جيدة بما فيه الكفاية. بالكاد :)

يعد حل

في Chosen.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
  });

}

CSS:

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

إذا كنت تستخدم jQuery UI أو أي شيء آخر ، فقد تواجه مشاكل مع z-index ، لذلك قم بتعيين مؤشر z المختار على قيم أعلى (jQuery UI هو 1010+)

الآن هو wokring في FF وبالنسبة إلى Chrome ، فأنت بحاجة إلى:

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

يمكن أن تتداخل عناصر

لماذا لا يتم عرض القائمة المنسدلة في النص واستخدام وظيفة موضع Jquery UI لتحديد موضع المربع؟ http://jqueryui.com/demos/position/. هذه هي الطريقة القياسية المستخدمة للعديد من أدوات jquery ui.

$ (".czn-drop") .position ({
من: $ ("#container")،
لي: "أعلى اليسار" ،
عند: "left bottom"،
}) ؛

سامحني على المداخلة ، لقد واجهت نفس المشكلة في عرض القائمة المنسدلة المختارة في مربع حوار jQueryUI.
لقد جربت الأشياء المعتادة مع تجاوز السعة ولكن هذا كان يعبث بمربعات الحوارات الأخرى.

ما فعلته بدلاً من ذلك ، هو ضبط مربع الحوار الخاص بي على ارتفاع ثابت وتعيين القائمة المنسدلة المختارة على ارتفاع ثابت أيضًا.
سيكون من الجيد أن يكون لديك خيار للقيام بذلك من الخيارات المختارة بدلاً من css.

.chzn-drop {
تجاوز: تلقائي ؛
أقصى ارتفاع: 75 بكسل ؛
}

ربما هذا يساعد شخص آخر.

Excuse-moi لسؤال n00bish / RTFM تمامًا ، ولكن كيف يمكنني عرض القائمة المنسدلة خارج الحاوية (على سبيل المثال ، على body )؟ في الوقت الحالي ، الشيء الوحيد الذي يتبادر إلى ذهني هو فصل المكون الإضافي ودفع هذا الجزء من التعليمات البرمجية فيه. يجب أن تكون هناك طريقة أكثر أناقة لتحقيق ذلك.

هل هناك حدث حرائق مختارة عندما تكون القائمة المنسدلة مفتوحة / مغلقة. إذا كان الأمر كذلك ، يمكنني فقط تغيير إعداد الفائض لقسم الوالدين ليصبح مرئيًا ثم العودة مرة أخرى. حاولت ذلك باستخدام:

$(".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: show_dropdown "، function () {
$ (this) .parents ("div"). css ("overflow"، "visual")؛
}) ؛
$ (". chzn-select"). on (" liszt: hiding_dropdown "، الوظيفة () {
$ (this) .parents ("div"). css ("overflow"، "")؛
}) ؛

بالطبع ، قد لا يعمل مع جميع التخطيطات.

شكرا ... بوب

لقد قمت بتقسيم الكود لجعل القائمة المنسدلة التابعة <body/> . لم أختبرها بشكل كافٍ حتى الآن ، لكنها تعمل هنا بشكل مثالي -> https://github.com/gil/chosen

هل يمكنك معرفة ما إذا كان يحل مشكلتك ، @ compaton؟ أعتقد أنه عليّ فقط اكتشاف التمرير الآن ، لإصلاح الموضع يدويًا.

لقد أصلحت الشوكة مشكلة العرض بالنسبة لي ، وعملت جيدًا في الجزء السفلي من الصفحة حيث حدت من الارتفاع الذي تعرضه لشيء معقول. ومع ذلك ، أوقفت الشوكة وظيفة التحديد المتعدد من العمل.

geoffweatherall حقا؟ لطيف! : D حول مشكلة التحديد المتعدد ، ما الذي توقف عن العمل؟ هل يمكنك من فضلك تجربة ملف example.jquery.html وإخباري إذا كان لا يعمل؟ بالنسبة لي يبدو أنه بخير.

نعم ، تعمل الأمثلة بشكل جيد (FF 12).

يوجد مثال التحديد الفردي في صفحة html عادية إلى حد ما مع "لوحات" تستخدم مخفية تجاوز السعة. ومع ذلك ، يوجد مثال التحديد المتعدد في "مربع حوار" تم إنشاؤه باستخدام colorbox (http://www.jacklmoore.com/colorbox) - لا تسألني لماذا ، كان المشروع على هذا النحو عندما وصلت. أعتقد أنه قد يكون له علاقة بذلك ، سأبحث فيه.

تعمل الشوكة على إصلاح مشكلة الانقطاع في عدد من المواقع في تطبيقنا ، بما في ذلك التحديدات المتعددة غير المتداخلة في مربعات الألوان (http://www.jacklmoore.com/colorbox). أعتقد أن مشكلة colorbox ليست خطأ في الاختيار. شوكة كبيرة :-)

في الواقع لقد وجدت مشكلة في التفرع الذي يظهر في نموذج الصفحة (example.jquery.html). بالنسبة لعنصر التحكم متعدد التحديد ، إذا قمت بالنقر فوق عنصر التحكم لفتح قائمة الخيارات ، ثم استخدمت مفتاحي السهم لأعلى ولأسفل للتنقل في القائمة ، فإن قائمة الخيارات تقوم بنقل مفاجئ إلى أعلى الصفحة. لا تحدث هذه المشكلة للتحديدات الفردية. تم الاختبار في FF12 و Chrome 18 و IE8.

geoffweatherall ربما

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

أو حاول ضبط عتامة colorbox على 0.1 للتحقق مما إذا كان بإمكانك رؤية القائمة المنسدلة أسفل مربع الألوان.

المشكلة الأخرى ، مع المفاتيح ، سأحاول إيجاد بعض الحلول. لم أستخدم التحديد المتعدد في المشروع الذي أعمل فيه الآن ، لذلك لم أختبره تقريبًا. ركز أكثر على خيار الاختيار الفردي.

حسنًا ، لقد جربت هذا ووجدت القوائم المنسدلة مرئية ، لكن الموضع خاطئ. إنهم ينزلون أسفل مربع النص قليلاً. هنا جينغ يظهر السلوك. http://screencast.com/t/c4PCIHC176RX

مرحبا جيل ،

لقد جربت نسختك وهي تعمل! شكرا جزيلا!
هناك شيء واحد صغير فقط توقف عن العمل .. إنه خيار disable_search_threshold. لن يختفي حقل البحث.

هل لديك أي فكرة؟

شكرا!

لا يهم! ومع ذلك ، تمكنت من إصلاحه بنفسي .. ربما يجب عليك تغيير ذلك في الكود أيضًا:

يتغيرون:

    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");
    }

ما هي حالة هذه الشوكة؟ هل تم دمجه في سيد؟ أم أنها لا تزال قيد الاختبار؟

هناك مشكلة أخرى .. يبدو أن الشوكة تعمل بالنسبة لي ، ولكن في متصفح Firefox أرى القائمة المنسدلة div أسفل الصفحة. يبدو أن الموضع الأيسر السلبي لا يحركه خارج منطقة العرض. ربما كان ذلك بسبب بعض الأساليب الأخرى التي فكرت بها. اي فكرة؟ لماذا لا يتم ضبط العرض على لا شيء؟

لقد تقدمت بطلب سحب منذ فترة طويلة لإصلاحي الأصلي ولكنه كان كذلك
لم تقبل (لا فكرة لماذا).

كان هناك الكثير من التعديلات الإضافية المقترحة في هذا الموضوع
منذ ذلك الحين ، لم ألعب مع أي منهم حتى الآن ، ولم أتحقق من الأمر
لمعرفة ما إذا كان لدى شخص ما شوكة تضمهم (إذا لم يكن هناك
أولاً ، يجب على شخص ما إنشاء واحد ، وإذا كان هناك ، فسيكون ذلك جيدًا
الإجابة على سؤالك.)

يوم الخميس ، 7 حزيران (يونيو) 2012 الساعة 6:44 صباحًا ، بوب آرتشر
[email protected]
كتب:

هناك مشكلة أخرى .. يبدو أن الشوكة تعمل بالنسبة لي ، ولكن في متصفح Firefox أرى القائمة المنسدلة 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"
      });

في selected.css:

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

gil ، أريد فقط أن أقول شكرًا لك على شوكة ، كنت على وشك التخلي عن استخدام Chosen لمشروعي بسبب هذا الخطأ.

أنا بصراحة مندهش تمامًا من أن عمال الحصاد لا يرون العيب المتأصل في ربط نافذة منبثقة عائمة بحاوية مقيدة. حتى بغض النظر عن قواعد التجاوز ، فهذه ليست فكرة جيدة لمكتبة عامة ليس لديها فكرة عما قد يفعله الناس حول الأداة.

مرحبا شباب! من الجيد أن تعرف أن مفترقتي تساعد بعض الأشخاص في حل هذه المشكلة ... :)

لا أعرف ما إذا كانوا يخططون لتغيير الكود أو الدمج مع بعض الحلول المقترحة هنا. لا نعرف ما إذا كان بإمكاننا افتراض أن هذا هو الحل الأفضل لجميع الحالات. دعنا نواصل الاختبار وربما نرسل طلب سحب مع كل التغييرات.

geoffweatherall لقد أصلحت الكود بشيء أعتقد أنه سيساعدك في مشكلة لوحة المفاتيح. من فضلك قل لي إذا كان يعمل! ؛)

PilotBob هل ما زلت تواجه مشكلة من هذا الجينغ؟ حول المشكلة الأخرى ، لقد اختبرت example.jquery.html على Firefox 12 ويبدو أنه جيد. ربما يمكنك محاولة استبدال كل left:-9000px الذي يمكنك العثور عليه بـ display:none . لا أعرف الرمز جيدًا بما يكفي لإخبارك ، ولكن نظرًا لأنني إعدادات display:block عند results_show() ، فقد يساعدك ذلك.

pruimmartin شكرًا لك على الإصلاح الخاص بك وآسف

جيل - لا يبدو أنه لم يعد يحدث ، ولم أغير أي شيء. أتوقع أنه ربما كان هناك خطأ js في مكان آخر تسبب في ذلك. ومع ذلك ، لدي مشكلات أخرى مع المختار وكنت أفكر في استبدالها بشيء آخر. هذا يرجع أساسًا إلى عدم وجود تحديثات يتم إجراؤها على البرنامج الرئيسي.

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 مرحبًا ، آسف. الآن أرى ما هو الخطأ. سأحاول إصلاحه لاحقًا اليوم.

لا مشكلة ،gil! شكرا على الرد الفوري! أحتاج إلى إجراء المزيد من التجارب ، ولكن قد يكون من المفيد أيضًا السماح بالارتباط بعنصر عشوائي - والذي يجب أن يكون تافهًا أيضًا ، على ما أعتقد. لدي مربع تحديد داخل div التمرير ، وبينما يمنع الحل الخاص بك القطع ، لا تتحرك القائمة مع div عند التمرير. أعتقد أن كل ما هو ضروري هو div واحد إضافي في مكان ما ، لكن هذا سيتطلب بعض الإصلاح.

rreusser لقد عدت عن الالتزام

وحول الارتباط بعنصر مختلف ، كنت أفكر في جعله قابلاً للتكوين. ولكن يمكنك حل مشكلة التمرير الخاصة بك مع القليل من التكوين. عندما لا يكون <select /> تابعًا مباشرًا لـ div الذي يقوم بالتمرير ، فجرّب ما يلي:

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

ولكن إذا كانت العقدة الرئيسية لـ <select /> هي عقدة <div /> ، فلن يكون هذا ضروريًا.

gil ، هل سيتم دمج هذه الشوكة لإتقان؟ أم أنها لا تزال قيد الاختبار؟ لدي أيضًا مشكلة في عناصر التحكم في لوحة المفاتيح في الشوكة ، فمفتاح السهم لأسفل لا يطلق أساليب results_show أو results_toggle. شكرا :-)

myfriendtodd @ لا أعرف حتى الآن ، ربما يمكنني إرسال طلب سحب عندما يعتقد الجميع أنه مستقر. لكنني ما زلت أعتقد أنه يحتاج إلى مزيد من الاختبارات. سأحاول إصلاح مشاكل لوحة المفاتيح في نهاية هذا الأسبوع. شكرا!

myfriendtodd مرحبًا ، أعتقد أنني

شكرًا gil سيتيح لك معرفة كيف يتضح الأمر. شكرا لجميع التعليمات الخاصة بك :-)

gil شكرا جزيلا على شوكة الخاص بك. الإصلاح يعمل بشكل جميل بالنسبة لي - رائع!

ومع ذلك ، فأنا أستخدم Kickstrap لأسلوب Chosen ليلائم Twitter Bootstrap. ينتج عن هذا الخيار Chosen مع تعطل هذا الإصلاح بشكل سيئ للغاية - تظهر محتويات القائمة المنسدلة في أسفل الصفحة ، غير منظمة - https://skitch.com/dyad/euys2/login . بقدر ما أعرف ، فإن كل ما يفعله Kickstrap هو الإفراط في كتابة الأنماط المختارة الافتراضية.

يمكن العثور على ملف LESS الخاص بالتغييرات التي تم إجراؤها على التصميم على https://github.com/ajkochanowicz/Kickstrap/blob/master/extras/chosen/chosen.less - هل هناك أي شيء واضح أن تعديلاتك الإصلاحية تفسر سبب ذلك قد يحدث؟

شكرا جزيلا حقا.

مرحبا شباب،

أنا أعمل على إصدار جديد بنهج مختلف ، بدلاً من إلحاق القائمة المنسدلة بالجسم. هذا الإصدار أنظف كثيرًا ونأمل أن يقلل من العديد من الأخطاء ، لأن التغيير ليس بهذا الحجم. هل يمكنكم تجربتها لمعرفة ما إذا كانت تعمل؟ في فرع جديد:

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

conatus هل يمكنك المحاولة مع هذا الإصدار أيضًا؟ أحدث إصدار في الفرع "الرئيسي" كان يحتوي على العديد من التغييرات في ملف css ، هذا الإصدار تغير فقط 3 أسطر. غيّر هذه الأشياء في Css المختار من Kickstrap:

• السطر 4 ، التغيير من "الموضع: نسبي ؛" إلى "الموضع: ثابت ؛".
• تغيير السطر 13 من "الموضع: مطلق ؛" إلى "الموقف: ثابت ؛".
• في السطر 128 ، أدخل سطرًا جديدًا "display: none؛" ، أسفل "left: -9000px؛"

آمل أن ينجح هذا! ؛)

أيضًا ، هذا الإصدار الجديد متزامن مع الفرع الرئيسي لـ Harvesthq!

آسف لم أتابع من قبل ولكننا دخلنا في جزء مختلف من المشروع وتلاشى هذا في المسافة بسرعة كبيرة! سأختبرها وأعلمك بمجرد أن تسنح لي الفرصة. شكرا جزيلا لجهودك المستمرة!

gil - أنا

لا يسعني سوى التفكير في حلين محتملين لهذا:
1) إذا تم وضع الاختيار داخل عنصر ثابت الموضع ، فيجب وضع القائمة المنسدلة داخل حاوية chzn وإعطائها موضعًا ثابتًا أيضًا. يجب حساب الموضع العلوي من خلال الموضع الثابت للحاوية
2) أعد حساب موضع القائمة المنسدلة أثناء التمرير

الخيار الثالث هو إصلاح القائمة المنسدلة في أي وقت يكون التحديد في حاوية ذات موضع ثابت.

ragulkaChiperSoft أرى مشكلة ... فقط للتأكد، وهذا التكاثر jsfiddle ما يا رفاق يقولون؟ http://jsfiddle.net/QY256/

سأحاول أن أفعل شيئًا حيال ذلك. هناك خيار جديد يسمى overflow_container سيتعامل مع مشاكل التمرير ، كما ترى عندما تقوم بتمرير div فقط. لكن المشكلة هنا عندما تقوم بالتمرير عبر النافذة ، سيتم وضعها بشكل غير صحيح.

كنت أفكر في جعل Chosen قريبًا ، عندما يتم تمرير شيء ما ، نظرًا لأن التعامل مع التمرير يتسبب في بعض المشكلات البسيطة الأخرى (مثل عندما يكون <select /> مرئيًا نصف فقط).

ragulkaChiperSoft أيضًا ، كإصلاح مؤقت ، هل يمكنكم يا رفاق محاولة تغيير السطر 640 ، داخل طريقة update_position ، من:

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

ل:

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

gil نعم ولا - يُظهر jsfiddle الذي قدمته المشكلة ، ولكن بالنسبة لي ظهر عندما كنت أقوم بتمرير الجسم (لم يكن العنصر الثابت الخاص بي يحتوي على أي أشرطة تمرير). في jsfiddle الخاص بك ، يبدو أن المشكلة تظهر عندما أقوم بتمرير محتويات العنصر الثابت ، ولكن ليس عند تمرير الجسم.

ragulka أعلم أنه ليس الحل الأفضل ، لكني أعتقد أنني

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

يجب أن يعالج هذا التمرير على div وعلى document ، ويصلح المركز.

ولكن كما قلت ، أعتقد أنني سأغير هذا لاحقًا لإخفاء Chosen عندما يقوم المستخدم بتمرير شيء ما.

قد لا يكون هذا خطأً مختارًا ، لكنني قمت بالتبديل إلى select2 كبديل عن الخيار المختار واختفت المشكلة دون الحاجة إلى إجراء أي حلول بديلة.

شكرا جزيلا لذلك.

في الوقت الفاصل تم تحديث Kickstrap - https://github.com/ajkochanowicz/Kickstrap/blob/beta/assets/Kickstrap/apps/chosen/chosen.css. يعمل فرعك الجديد بشكل رائع ، ولكن لا يبدو أن التغييرات التي تقترحها على Kickstrap CSS لها تأثير. ما يحدث هو أن القائمة المنسدلة نفسها لم تعد تظهر. أيه أفكار؟ شكرا جزيلا.

شكرا لك @ جيل !!! قام فرعك (https://github.com/gil/chosen/tree/new_version) بإصلاح مشكلتي في هذه المشكلة بالذات.

شكرا على كل النصائح لقد أجريت بعض التعديلات الطفيفة على الاقتراحات أعلاه من أجل جعل القوائم المنسدلة تعمل مع نماذج Bootstrap v2.1.1 و Chosen v0.9.11. كانت هناك حاجة إلى تغييرات صغيرة للحصول على .chzn-drop ليتم وضعه بشكل صحيح بمجرد إعادة فتحه بعد تمرير الصفحة.

أتمنى أن يساعد هذا الآخرين.

CSS

.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();
    };

لذلك كنت ألعب قليلاً مع Chosen 0.9.11 وحددت التغييرات التي أحتاجها في Chosen ...

أنا أستخدم Chosen داخل مربع حوار jQueryUI تم تعديله بشكل كبير وهو قابل للسحب وله أقصى ارتفاع مع تجاوز: التمرير.

لجعل المختار يتصرف كما أريد لقد غيرت ".chzn-container .chzn-drop" إلى " position: fixed " وإضافة " display: none ". ثم في "Chosen.prototype.results_hide" أضفت " عرض: لا شيء " إلى "this.dropdown.css" ...

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

وفي "Chosen.prototype.results_show" ، استبدلت محتوى "this.dropdown.css" بـ " display: block ".
للحصول على الموضع الصحيح لعنصر div .chzn-drop ، قمت بإضافة وظيفة موضع 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؟
GWTC حسن رائع. ومع ذلك ، في الحالة الحالية ، لا يمكن استخدامه مع LayoutPanels على الإطلاق.

ماذا عن إضافة ميزة جديدة إلى المكتبة المختارة حيث سيتم عرض القائمة فوق حقل النص ببساطة عن طريق إضافة فئة مختلفة أو جديدة؟ بهذه الطريقة لا يضطر البرنامج النصي إلى عرض القائمة خارج تجاوز التفاف المخفي ، ومن المحتمل أن يحل معظم المشكلات التي يواجهها الآخرون. ملاحظة: لا أعتبر أن هذا يمثل مشكلة تجاوز السعة: المخفي يفعل بالضبط ما يفترض القيام به. من الجميل أن يكون لديك ميزة. شكرا.

+1 لاقتراح كليكيركو.

تمامًا مثل sillysachin ، أستخدم GWTChosen ولدي نفس المشكلة مع LayoutPanels و overflow: hidden و ChosenListBox: /

هل يستطيع احد اصلاح هذا؟ sillysachin هل توصلت إلى شيء ما منذ أن نشرت هنا؟

Tnx مقدما :)

لقد قمنا نوعًا ما بتصحيحه بشكل مخصص عن طريق سحب القائمة المنسدلة div من الحاوية الرئيسية. لسوء الحظ ، أنا غارق في سحق التحرير وسأستغرق وقتًا لتنظيف التصحيح قبل إرساله هنا.

يؤدي هذا الالتزام في 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;
};

واضطررت إلى إضافة عرض إلى CSS ، وإلا فسيتم عرض الموقع بنسبة 100٪.

.modal .chosen-container. selected-drop {
الموقف: ثابت ؛
العرض: 300 بكسل ؛
}

لقد تمكنت من إصلاح المشكلات المتعلقة بالكود أعلاه. متوافق مع الإصدار 1. ومع ذلك ، فإن المنجم أكثر من مجرد منصة حتى يعمل. لكنها تعمل بشكل صحيح حتى الآن. المشكلة الأخيرة التي أراها هي تغيير حجم المتصفح ، ولا يعمل الوضع الحالي.

هل يعلم أي شخص ما إذا كان سيتم دمج أي من الحلول الممكنة لهذه المشكلة في الفرع الرئيسي قريبًا؟ هذه صفقة فاصلة بالنسبة لي = /.

انتقلنا إلى استخدام Select2 ... يحتوي على المزيد من الميزات أيضًا.

يوم الخميس ، 19 كانون الأول (ديسمبر) 2013 الساعة 11:24 صباحًا ، دانيال هوفمان برنارديس <
[email protected]> كتب:

يعرف أي شخص ما إذا كان سيتم تنفيذ أي من الحلول الممكنة لهذه المشكلة
الاندماج في الفرع الرئيسي قريبا؟ هذه صفقة فاصلة بالنسبة لي = /.

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/harvesthq/chosen/issues/86#issuecomment -30942420
.

شكرًا لك PilotBob ، هل تم اختياره ولم يعد يتم صيانته؟ إذا كان الأمر كذلك ، فقد ترغب في تحديث الوثائق.

إنه ليس مشروعي. أنا "كنت" مستخدمًا لها. بسبب العديد من القضايا التي وجدناها
بديل.

يوم الخميس ، 19 كانون الأول (ديسمبر) 2013 الساعة 11:53 صباحًا ، دانيال هوفمان برنارديس <
[email protected]> كتب:

شكرًا لك PilotBob ، هل تم اختياره ولم يعد يتم صيانته؟ إذا كان الأمر كذلك فقد تريد
لتحديث الوثائق.

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/harvesthq/chosen/issues/86#issuecomment -30945150
.

لا يزال DanielHoffmann Chosen نشطًا. كان Select2 في الأصل شوكة لـ Chosen ، لكنه ابتعد كثيرًا منذ ذلك الحين لدرجة أنه شيء خاص به.

تم الإبقاء على Chosen بسيطًا عن قصد - فقد كان من المفترض أن يكون بديلاً مؤقتًا مقابل select s ، لذلك فهو يتجنب الكثير من الميزات والتكوينات المعقدة. سلكت Select2 المسار المعاكس ، وأضافت العديد والعديد من الميزات والتكوينات - الأمر متروك لك بشأن أي من تلك الفلسفات تقدرها أكثر.

بالنسبة لهذه المشكلة _specific_ ، فهي للأسف مجرد مشكلة ، وليست حلًا. إذا قدم شخص ما طلب سحب لإصلاحه ، فسيتم اعتباره للدمج. ومع ذلك ، فإن OSS ليست الوظيفة الأساسية لأي من المشرفين - فهم يعملون عليها عندما يكونون قادرين على القيام بوظائفهم بدوام كامل. لذلك ، كما هو الحال دائمًا ، يتم قبول "طلبات السحب" إذا كنت تريد محاولة إصلاحها بنفسك!

متى سيتم حل هذه المشكلة؟ إنه قديم جدًا ولكنه مهم للعديد من المشاريع! يرجى معالجتها في أسرع وقت ممكن!

شكرا!

هناك الكثير من الإصلاحات في الشوكات المختارة فلماذا لا تستخدم أحد تلك الإصلاحات؟

domnulnopcea لم يكن هناك مطلقًا أي

لدي إصلاح لهذا ، إنه ليس شوكة نظيفة ، إنه مدفون في مستودع آخر وهو فقط في إصدار jQuery. (لا أنا لست فخورة بنفسي)

إنه يعمل عن طريق إضافة عنصر القائمة المنسدلة إلى عنصر النص وتعيين موضعه تمامًا عند تمرير الصفحة أو تغيير حجمها. يعمل أيضًا على تحديد ما إذا كان يجب أن تكون القائمة المنسدلة أعلى أو أسفل الحقل وكم يجب أن يكون ارتفاعه (بحيث لا يتم قطعه بالصفحة).

إذا كان هذا شيئًا أنت مهتم بدمجه (وليس هناك بالفعل مفترقات أخرى) سأحاول أن أجد بعض الوقت لنفض الغبار عنه وإنشاء طلب سحب.

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

@ stof ماذا عن https://github.com/tompaton/chosen؟

الالتزام: https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983

domnulnopcea لم يتم تقديم هذا لإدراجه في Chosen نفسه AFAIK. لا يمكننا غسل الشوكات على الإطلاق لفحص جميع الأعمال المنجزة عليها. نحن نعمل على Chosen في وقت فراغنا ، لذلك لا يمكننا تخصيص أسابيع لفحص الآلاف من الالتزامات في العديد من عمليات إعادة الشراء لمعرفة ما يفعلونه

@ stof نحن نقدر عملك كثيرا. أنا أستخدمه في مشروعي الخاص (www.ubirimi.com) ولكن الآن بعد أن أعطيتك رابطًا لالتزام ، هل ستكون لطيفًا جدًا للنظر في هذه التغييرات وتطبيقها على المستودع الرسمي المختار؟

شكر كثيرا

نظرًا لأنه لا يمكن تطبيقه بشكل مباشر (لقد تغير الرمز كثيرًا منذ 11 شهرًا) ، فإنه سيتطلب بعض الوقت (ويتطلب أيضًا اختباره للتأكد من أنه يعمل بشكل صحيح). لذلك لا يمكنني فعل ذلك الآن

stof شكرا للتفكير في القيام بذلك! أنا أقدر ذلك!

domnulnopcea إذا كان هذا مهمًا بالنسبة لك ، فلماذا لا تقوم

msaspence لكنني

انتقلنا إلى Select2 لأنه يسمح باسترجاع بيانات AJAX. قد ترغبون يا رفاق في النظر إليه.

أعتقد أن الجميع قد انتقلوا إلى Select2 في هذه المرحلة - هل هناك أي ميزة لاستخدام Chosen؟

بالنسبة لي عملت بشكل مثالي حل PilotBob!

لقد أضفت هذا إلى الكود الخاص بي:

$ (document) .ready (function () {
$ (". chzn-select"). on (" liszt: show_dropdown "، function () {
$ (this) .parents ("div"). css ("overflow"، "visual")؛
}) ؛
}

شكرا جزيلا!!!

تكمن المشكلة في أن موضع قائمة الخيارات هو absolute ، ولا يوسع الحاوية الرئيسية. الحل الذي أقترحه هو تغييره إلى float: left | right لأنه يمكن أن يوسع الأصل ، إذا قمت بعد إضافة كائن DOM بـ clear:both

لقد قمت بحل هذا (المستخدم مع مربع حوار jquery-ui) مع ما يلي في css الخاص بي:

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

grduggan هل يمكنك اقتراح حل في css للمكتبة؟
أعتقد أن حلك صالح. تقديم طلب دفع!
+1

لم تفعل ذلك من قبل. سآخذ للتحقيق. سيكون من الجميل أن يكون في المغلق.

أرى مشكلة مماثلة عندما يكون مربع التحديد قريبًا من نهاية الصفحة. مربع التحديد الأصلي يحل هذا الأمر بمجرد الفتح بدلاً من الإسقاط. لما لا؟

تجاوز: مرئي ؛ على div الحاوية عملت معي! شكرا.

لا تحتاج دائمًا إلى الفائض: مخفي عند استخدام العوامات ، يمكنك أيضًا مسح العوامات باستخدام هذا في والدك (إزالة الفائض: المخفي):

&:قبل،
&:بعد، بعدما {
المحتوى: " "؛ // 1
جدول العرض؛ // 2
}
&:بعد، بعدما {
واضحة على حد سواء؛
}

هذه هي الطريقة التي يعمل بها clearfix class في bootstrap

لقد قمت بتعديل ملف css (انظر أدناه). يبدو أنه يعمل من أجل السيناريو الخاص بي.

.اختيار حاوية. اختيار إسقاط {
الموقف: نسبي ؛ / _ تم التغيير من مطلق لتجنب انقطاع التيار الزائد في الحاوية_ /
أفضل 100٪؛
اليسار: -9999 بكسل ؛
مؤشر z: 1010 ؛
العرض: 100٪؛
الحدود: 1px صلب #aaa ؛
أعلى الحد: 0 ؛
الخلفية: #fff ؛
مربع الظل: 0px 4px 5px rgba (0،0،0،0.15) ؛
}

اختيار حاوية. النتائج المختارة {
اللون: # 444 ؛
الموقف: نسبي ؛
تجاوز- x: مخفي ؛
تجاوز- y: تلقائي ؛
الهامش: 0 4px 4px 0 ؛
الحشو: 0 0 0 4 بكسل ؛
أقصى ارتفاع: 200 بكسل ؛ / _تغير من 240 بكسل_ /
-webkit-overflow- التمرير: اللمس ؛

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

}

يمكن أن يؤدي أيضًا التفاف التحديد (والمختار) في عنصر fieldset تأثيرات غير مرغوب فيها في متصفحات webkit (على سبيل المثال ، عندما يكون لدى أحد الوالدين overflow: hidden ).
هذا لأن webkit تضيف min-width: -webkit-min-content; إلى مجموعات الحقول بشكل افتراضي.

هذا حل المشكلة بالنسبة لي:

fieldset { min-width: 0; }

chassq hmm لا يعمل الحل الخاص بك بالنسبة لي ، .. انظر لقطة الشاشة هذه:

لدي div حول التحديدات المختارة مع

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

شكرا لجميع الذين قدموا الحل بالفعل مع position: fixed

إليك jsfiddle مع الحل (يستبدل فئات CSS المختارة):
http://jsfiddle.net/jwbL8utx/1/ ؛)

ما زلت أواجه مشكلة واحدة ، عند التمرير لأسفل (باستخدام أقصى ارتفاع) ، فإن المختار له إزاحة ، كما ترى هنا عند التمرير لأسفل وفتح الخيار الثاني المختار:

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

هذه طريقة حلها:

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

لا يتطلب هذا الإصلاح تغيير أي عناصر أخرى بجانب القائمة المختارة نفسها. ستلاحظ أنه يخفي القائمة مرة أخرى إذا قمت بإلغاء التمرير عليها ، ولكن هذا حسب متطلباتي. إذا كنت تريد الاحتفاظ به في المقدمة طوال الوقت ، فيمكنك ربط حدث تمرير بحاوية div وتشغيل الحدث "

typologist شكرا على الحل الممتاز الخاص بك.
هناك نوعان من الأخطاء الطفيفة في JS الخاص بك وأود أن أذكر على الرغم من:
في السطر 51 ، يجب أن يكون

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

وإلا يمكن تهجير النافذة المنبثقة في ظل ظروف معينة

في السطر 23 ، بدلاً من استخدام

$('.chosen-container')

لربط الأحداث ، أعتقد أنه سيكون من الأفضل استخدامها

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

من أجل تجنب العديد من الروابط إذا تم استدعاء الوظيفة أكثر من مرة باستخدام عناصر واجهة مستخدم مختلفة مختارة لإصلاحها.

من فضلك قل لي هل هناك أي حل لـ Chosen v1.4.2؟

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

overflow-y: visible

أضف هذا إلى div الأصل الذي يحتوي على التخطيط. في حالتي ، كان هناك قسم فرعي لمربع حوار مشروط يحتوي على _overflow-y: auto_ واستبداله بـ _overflow-y: مرئي_ عمل لي.

هل يوجد حل لهذه المشكلة بعد؟

هذا المشروع لديه ردكم:
http://jsbin.com/finufihaji/edit؟html

البحث عن القليل وإجراء الاختبارات هو الحل الأساسي.

اضطررت إلى تجاوز نتائج الاختيار.

على الأقل هذا يناسبني ومعظم المجال الذي اخترته به 3 أو 4 خيارات فقط. 1 فقط (الشخص المخفي) لديه حوالي 12 ويمكن أن ينمو في المستقبل القريب.

لقد طبقت ما يلي على div الرئيسي الذي به تجاوز السعة: مخفي

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

المصدر: Stack Overflow

doowruc الإختراق العظيم!

هل هناك طريقة لإرفاق القائمة المنسدلة المختارة بهدف معين ، حتى نتمكن من إرفاقها بجسم المستند بدلاً من مربع حوار؟ بهذه الطريقة المختارة يخرج من الحوار ولا يحتويه؟

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

عملت من أجلي.

أعلم أنني ما زلت أعاني من هذا. إليك كمان يعرض خيارًا لنقل العنصر إلى الجسم وتعيين موضع مطلق بشكل موثوق ، حتى مع التمرير.

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

https://github.com/R1p8p8e8r/chosen
أعتقد أن الحل الخاص بي سوف يساعدك