Chosen: إذا كان التحديد مخفيًا في البداية ، فلن يعمل

نعم ، يجب تصحيح نص القهوة. أنا أيضًا لدي القدرة على إعداد العناصر المخفية.

واجه +1 في هذه المشكلة اليوم

+1 كما فعلت أنا

كحل بديل ، يمكنك تعيين عرض div الذي تم إنشاؤه باستخدام العلم !important :

#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;
}

تم اختبار إصدار سابق من Chosen بالفعل لمعرفة ما إذا كان عرض حقل النموذج قد تم تعيينه عبر css. إذا كان الأمر كذلك ، فلن يستخدم حساب العرض. أعتقد أنني أفضل طريقة الإصلاح هذه لإضافة 30 سطرًا من التعليمات البرمجية لاختبار العناصر المخفية. هل يعمل شيء مثل هذا من أجلك؟

اضبط العرض:

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

اختبارات JS لضبط العرض أولاً:

  <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) ، فسوف يفسرها الرمز على أنها وحدات بكسل. انظر السطر 56 في selected.jquery.coffee

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

مرحبًا pfiller ، هذا لا يعمل. يعرض كل من العرض () و css ("العرض") 0 للعناصر المخفية. أنا أستخدم تقنية getHiddenDimensions وهي تعمل بشكل جيد.

راجع للشغل ، تحتاج إلى استخدامه لكل من f_width وكذلك في get_side_border_padding

+1 لهذا.

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

+1 كذلك. يجب أن تكون فحوصات الرؤية مضمنة.

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

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

+1 لهذا. لقد قررت تحويل Chosen إلى نوع حقل لـ ExpressionEngine CMS ، لكن تخطيطات النشر الخاصة بـ EE تسمح بإخفاء الحقول عند تحميل الصفحة.

لست متأكدًا مما إذا كان هذا مرتبطًا ، ولكن في حالة EE ، سيكون من الأفضل أن يكون العرض مائعًا ، أو كان دائمًا 100٪ من عنصره المحتوي ...

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

اصطدمت بهذا ... لا يزال يحدث في أحدث إصدار

+1
يحظر هذا الخطأ استخدام المكون الإضافي Chosen للتطبيقات الداخلية في Netflix

: +1: في هذه القضية ، واجهت هذه المشكلة اليوم

يمكنك إخفاء المحتوى الخاص بك مع: الموقف: مطلق؛ اليسار: -999em ؛
بهذه الطريقة ، يمكن لقارئي الشاشة و Google "قراءتها" أيضًا ، وستكون القائمة المنسدلة المختارة مرئية عند عرضها مرة أخرى.

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

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

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

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

pfiller المدرج أعلاه في هذا الموضوع ، https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

الأهم من استخدام css هو استخدام العرض "الحالي" للعنصر عند عرض النتائج ، بدلاً من استخدام عرض تم تخزينه مؤقتًا بشكل غير صحيح من إنشاء Chosen.

كانت هناك العديد من التغييرات ، ولست متأكدًا تمامًا من أفضل طريقة لدمجها بنفسي. هل سيكون لديك نسخة مدمجة قريبا؟

bewest يقوم طلب السحب بذلك ، في كل مرة تظهر فيها القائمة المنسدلة تتطابق مع عرض العنصر

delvarworld أعرف ، فقط تأكد من التمييز الصحيح.

هل يمكنك محاولة تحديث فرع العرض التلقائي الخاص بك مع HEAD؟ حاولت الدمج من عملية دفع مماثلة في نهاية شهر أغسطس ، لكن مربع الإدخال أصبح الآن عرضًا خاطئًا (إنه عريض جدًا ، يفيض بعرض الحاوية المختارة).

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

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

DevarWorld نعم ، يجب إعادة صياغته قليلاً حتى يتم إدخال بعض البتات في تنفيذ الملخص. هذا من شأنه أن يسهل الحفاظ على الاختلافات بين النموذج الأولي و jquery.

هل ستكون على استعداد لمنحها مرة أخرى؟

عثرة مهذبة ... هل يعمل أحد على هذا؟

لا يعمل Chosen بالنسبة لي لأنه يخفي اختياري ، ثم يتعذر عليه حساب العرض. لا بد لي من اختراقها عن طريق تعيين عرض تعسفي لكل مكون من مكونات chzn في CSS. لا يبدو هذا مثل كيف يُفترض أن يعمل هذا ، وهو في الحقيقة لا يبدو طبيعيًا كما هو الحال على مواقع الويب التي رأيتها عليها.

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

كان الحل بالنسبة لنا هو الترقية ببساطة إلى أحدث إصدار من Jquery. نعم ، كان علينا إجراء بعض التصحيح والاختبار للرموز القديمة التي تستخدم jquery ، ولكن على المدى الطويل تعمل على إصلاح الكثير من المشكلات وتقليل الحاجة إلى الاختراقات الصغيرة عبر js / css.

أقوم بتثبيت أحدث jquery الذي تم حزمه في jquery jquery gem و jquery-ujs القضبان. أفترض أن هذا لا يزال قديمًا جدًا؟

نعم ، سيكون من الجيد الحصول على رقم إصدار فعلي. أستطيع أن أؤكد 1.6.2 هو
قديمة جدًا أيضًا.

يوم الأربعاء 16 تشرين الثاني (نوفمبر) 2011 الساعة 11:23 ، كيفين إليوت <
[email protected]

كتب:

أقوم بتثبيت أحدث jquery التي تم تعبئتها في جوهرة jquery القضبان
و jquery-ujs. أفترض أن هذا لا يزال قديمًا جدًا؟

RoyJacobs newest حاليًا 1.7 كما تم إصداره.

RoyJacobs يمكنني أن أؤكد أننا نستخدم 1.6.4 بدون مشكلة.

هذا غريب. نعم ، تستخدم جوهرة jquery-rails jQuery 1.7. لكنها ما زالت لا تعمل معي.

يمكنك أن ترى أنه لا يتم عرضه. يظهر الاستقصاء أن جميع العروض المحسوبة تساوي 0 بكسل. يحدث هذا حتى إذا قمت بتعيين .chzn-select للحصول على عرض في CSS أو مباشرة في معلمة النمط لعلامة التحديد.

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

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

أفكار؟

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

تأكد من أن التحديد يحتوي على بعض CSS المطبقة أو ورقة الأنماط أو المضمنة. إذا قمت بذلك باستخدام ورقة الأنماط ، فهذا يعني أنه يجب عليك حقن العنصر في DOM قبل أن تستدعي () المختار.

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

.example حدد ، .example .chzn-smth {
العرض: 50٪؛
}

وهذا من شأنه أن يطبق العرض بشكل صحيح بغض النظر عن كيف ومتى وأين تختاره.

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

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

لا أعتقد أن أي شخص! لقد صدمت لأنني لا أفهم كيف يمكن لأي شخص استخدام هذا. أنا لا أخفي المحتوى الخاص بي بشكل مصطنع. يبدو أن المكالمة المختارة () تقوم بذلك. غريب جدا.

kevinelliott أعتقد أن أولئك الذين كانوا يواجهون هذه المشكلة إما انتقلوا أو وجدوا إصلاحًا. كما قلت ، في حالتنا كان الأمر مجرد مسألة ترقية jquery. ضع في اعتبارك أيضًا أننا صممنا ملفعنصر بعرض 224 بكسل وقمنا بتعيين "display: none؛" مباشرة على العنصر وليس في ورقة أنماط.

آمل أن يكون هذا مفيدًا لك وأن تكون قادرًا على تشغيله.

شكرا ريتشارد. لقد قمت بترقية jQuery الخاص بي ولم يساعد ذلك. الشيء الغريب هو أنني لا أخفي عنصر التحديد الخاص بي. المختار يخفيه. لذا فأنا لست متأكدًا مما يحدث.

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

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

kevinelliott لأكون صادقًا ، أنا في عنصر (نقوم بذلك ، وأعمالنا بشكل جيد) ، و 2) التنقل عبر المكتبة المختارة لمعرفة النقطة التي تم اختيارها لإخفاء العنصر المحدد ... كان علي أيضًا القيام بذلك عندما واجهنا مشكلاتنا.

آسف لم أستطع تقديم المزيد من المساعدة.

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

tiagobrito : لدي نفس المشكلة بالضبط ولم أتمكن مطلقًا من حلها ، سواء تم إصلاحها أم لا.

RichardBlair شكرا لمساعدتكم. إذا كنت تفكر في أي شيء آخر ، فأخبرنا :)

+
نفس المشكلة ، من فضلك ، أصلحها

tiagobrito ، هل يمكنك وضع فكرة صغيرة توضح المشكلة؟

bewest اكتشفت بالفعل! يتم إلحاقه عند استخدام jquery 1.4.x في مشاريعي.
يوم الإثنين القادم سأخبرك بالإصدار الصحيح من jquery الذي يسبب لي العرض: 0px

bewest أؤكد أيضًا ،
تلك الإصدارات القديمة من jquery (أفترض ، الإصدار السابق 1.6.4)
خبط تخطيط التحديد ، والذي كان مخفيًا في البداية
هنا 2 كمان:
تخطيط عابث (مسج قديم): http://jsfiddle.net/dhampik/2E9fG/
التنسيق الصحيح (مسج جديد): http://jsfiddle.net/dhampik/Rs9Z3/

الحمد لله ، تم تحديث إصدار jquery بالإصدار الجديد القادم من إطار عمل Yii)

لدي هذه المشكلة عندما أحاول دمج Chosen في Trac. يكون عرض مربعات التحديد الأولية في شكل خصائص التذكرة 0. يتم إخفاء الخصائص افتراضيًا ويمكن توسيعها بالنقر فوق ارتباط. مسج v1.7.1

تحديث: لقد عملت على حل المشكلة نظرًا لأن خدعة CSS المذكورة في منشور مدونة foliotek على الأقل لم تعمل مع jQuery 1.7.1. لم أجرب نهج JS بعد.

الحل الخاص بي (لـ Trac):

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

لأولئك الذين يستخدمون jQuery <= 1.7.1

لقد عملت على حل هذه المشكلة باستخدام jQuery Actual
تم تغيير selected.jquery.js # 301 من
this.f_width = this.form_field_jq.outerWidth();
إلى
this.f_width = this.form_field_jq.actual( 'outerWidth' );

// تحرير thxkoenpunt للتعليق 1.7.2

midday وفقًا لـ README الخاص بـ jquery.actual ، هذا مطلوب فقط لإصدارات jQuery السابقة

يواجه الإصدار الأقدم من jQuery (> = 1.7.1) مشكلة في العثور على عرض / ارتفاع عناصر DOM غير المرئية.

midday شكرًا لك على العثور على ذلك ، بعد تنفيذ المكون الإضافي الفعلي ، تم إصلاح المشكلة مع

ما زلت أواجه هذه المشكلة ، هل من أفكار حول كيفية إصلاحها؟

نفس الشيء هنا لا يزال يمثل مشكلة - لا أستطيع أن أصدق أن هذا كان يحدث منذ سنوات ...

لقد واجهت هذه المشكلة أيضًا. أحب بعض المساعدة.

يبدو أن خدعة CSS هذه تعمل:

/* 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; }

تضمين التغريدة لقد أصلحت المشكلة بالنسبة لي. شكرا لك.

FWIW لقد وجدت أن تعيين min-width (حتى بدون! مهم) على .chzn-container و .chzn-drop و .chzn-search المدخلات يعمل أيضًا مع التحديدات المخفية في البداية.

الحل الخاص بي

المغلق:

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

لغة البرمجة:

بدلاً من ضبط العرض في عنصر التحديد ، اخترت إضافة div غلاف إلى عنصر التحديد الأصلي وتعيين عرض الغلاف.

يوفر خيار Chosen الآن خيارًا للتهيئة بعرض معين يتجاوز أي محاولة في الحساب. من المحتمل أن يكون هذا حلاً مُرضيًا لمعظم حالات الاستخدام حيث يكون التحديد مخفيًا عند نقطة التهيئة:

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

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

هل لدى أي شخص مشكلة في إغلاق هذا الخطأ بناءً على هذا الحل؟

كنت أستخدم الإصدار 0.9.8 وكانت اختياراتي المخفية تعمل بشكل طبيعي. لقد قمت اليوم بتحديث 0.9.14 وتوقفوا عن العمل. كنت أستخدم النسخة المصغرة. عندما أقوم بالتغيير إلى الإصدار العادي ، كل شيء يعمل بشكل جيد مرة أخرى (selected.jquery.js 0.9.14). هل هذا طبيعي؟ إنه خطأ في عملية التعدين؟

لا يعمل أي من المخفي على jQuery min أو الحجم الكامل 0.9.14.

الخيار الجديد "العرض" يعمل بالنسبة لي. العمل ، على الأقل ، للمدخلات الجديدة المختارة التي كانت مخفية في السابق.

trisweb هذا مشروع مفتوح المصدر والعداء غير مرحب به هنا. يوجد الكثير من الأشخاص هنا الذين قدموا الكثير من الوقت والطاقة لجعل Chosen على ما هو عليه اليوم. يرجى محاولة المساهمة في تحسين المشروع أو الامتناع عن التعليق. شكرا.

kenearley أنا على دراية تامة بآداب السلوك مفتوح المصدر ويجب أن

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

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

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

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

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

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

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

: +1: لإصلاح!

لقد كنت أضع عيني على Chosen منذ ما يقرب من عامين حتى الآن ، وما زال أكثر تحسينات واجهة المستخدم المختارة أناقة. لكن هذه المشكلة المخفية لا تزال تمثل عامل كسر رئيسي للصفقات ، ولا يمثل العرض بنسبة 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 OuterWidth للحصول على العرض ، والآن تستخدم HTML offsetWidth ، والذي ينتج عنه صفر ...

أعتقد أنه يعني أنه تراجع ، وهو أمر واعد. هل كان هناك أ
ما سبب الابتعاد عن طريقة 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 شكرا ، حل لطيف وسريع.

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

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

ابحث عن سطر الكود هذا في selected.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 يعطيني قيمة غير محددة.

تحياتي الحارة،

يحدث هذا الخطأ في Firefox ، ولا تختبره أبدًا على Chrome أو غيره.

الصورة الأولى (في الأعلى)
عرض المجموعة المختار لأنه يحتوي على شريط تمرير بينما لم يكن كذلك. هذه نتيجة غير صحيحة.

الصورة الثانية (وسط)
تم اختيار عرض المجموعة لأنه يحتوي على شريط تمرير مثل الصورة الأولى ولكن هذه المرة يحتوي على شريط تمرير وهو الصحيح.

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

ما عليك سوى تحديد عرض css ثابت بالبكسل للاختيارات المخفية.

إصلاح شامل لا يزال مطلوبًا.

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

لا توجد طريقة لتغيير حجم الكائن المختار ديناميكيًا؟ نظرًا لأنني أعرف متى أقوم بتغيير الحجم (حدث تغيير الحجم أو onShow أو ما شابه ذلك) ، فقد يكون ذلك بمثابة حل بديل. هل هناك وظيفة API لتغيير حجم الكائن المختار؟ أو إعادة التهيئة بطريقة ما؟

: +1: للإصلاح. ركض في هذا اليوم

: +1: ضيع _way_ الكثير من الوقت في تعقب هذا الأمر.

لا تزال تواجه مشكلة في الحجم في الوسائط. أي خطة لإصلاحه في الإصدار 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";

$ ('select'). تم اختياره ({width: '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 هل تقبل طلب سحب لإصلاح هذا؟ لست متأكدًا من أفضل حل حتى الآن ولكن سأكون سعيدًا بإصلاحه وتقديم طلب سحب: القلب:

حل قوي لهذا هو استخدام ng-if بدلاً من ng-show. يعمل بشكل مثالي وبسيط.

لقد اكتشفت أن ng-if هو الخيار المفضل في العديد من المواقف. ليس فقط إصلاح ng-select المكسور ، ولكن أيضًا للسماح بوحدات التحكم العودية (باستخدام مجموعة من ng-if و ng-controller و ng-init و ng-template).

لذلك يبدو أن هذه المشكلة التي مضى عليها 4 سنوات لم تحل بعد؟!؟!

+1

+1 في الوقت الحالي ... أنا أستخدم select2

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

يا له من خطأ ملحمي لمدة 5 سنوات ... ولا يزال يعض الناس (أوه!).

لدى Google خطأ مشابه في خريطتهم لا يتم عرضها بشكل صحيح في div مخفي. ومع ذلك فإن كلتا هاتين المشكلتين لها حلول سهلة التنفيذ.

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

إصلاحي "الشامل" مشابه للآخرين ، ويفترض أن جميع عروض تحديداتي في الترميز هي 100٪ من div الأصلي. نحن نستخدم bootstrap لذلك هذا هو الحال بالنسبة لنا.

قم بتشغيل هذا الرمز بعد تهيئة .chosen () عند تحميل الصفحة.

""
$ (". selected-container"). كل (وظيفة (i، elem) {
إذا ($ (elem) .width () == 0) {
$ (elem) .width ("100٪")؛
}
}) ؛
""

لأولئك منكم الذين لديهم مشكلة حيث إذا كان العنصر في البداية داخل حاوية مخفية css ، ثم عندما أصبح مرئيًا كان عرضه 0 بكسل - كان الإصلاح الذي وجدته هو ضبط العرض في تكوين js ؛

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

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

كيف يتم كسر هذا بعد سبع سنوات؟

يضيف الحل الخاص بي مع bootstrap 3 النمط التالي:

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

يضيف الحل الخاص بي مع bootstrap 3 النمط التالي:

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

شراء ثم القائمة المنسدلة لا تظهر .... koenvanderlinden

تم توثيقه بالفعل
https://harvesthq.github.io/chosen/options.html
حدد الخيار width ووصفه

qbadev على الرغم من أن هذا يجعل العنصر لا يتناسب مع المحتوى عند الحاجة لذلك لا أرى ذلك كإصلاح (خاصة عند استخدام min-width يوفر نتيجة أفضل من هذا).

وصف التوثيق بشكل فعال يستدعي الخطأ (الذي يجب أن يكون من الممكن حله) ويذكر استخدام ذلك كحل بديل محتمل للخطأ.

يوصي koenvanderlinden باستخدام min-width:90%; لذلك عادةً ما يكون عرضه 90٪ حيث يصل عرضه إلى 100٪ إذا كانت محتويات التحديد تستلزم ذلك. ثم مرة أخرى ، ما زلت أختار min-width:5em; (تختلف قيمة em الدقيقة وفقًا لحالة الاستخدام) لذا فهي ليست صغيرة جدًا ، لكنها لا تزال تحاول التوسيع لتلائم محتوى التحديد بدلاً من الحجم بناءً على الأصل عنصر.

KZeni لم أقل أنه حل. لقد تم توثيقه للتو. وهو حل جيد. كانت مشكلتي الرئيسية هي أن عرض Chosen كان تقريبًا 0 بعد الحرف الأول. الآن ، بعد "الإصلاح" ، يمكنني رؤية ما تم اختياره ويمكنني أن أفعل به كل ما أريد باستخدام فئات CSS المطبقة على العنصر الأصل.

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

دعم العرض المخصص
يعد استخدام عرض مخصص مع Chosen سهلاً مثل تمرير خيار عند إنشاء Chosen:
$(".chosen-select").chosen({width: "95%"});

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

لقد وجدت هذه المشكلة بعد ترقية jQuery من 1. * إلى 3. * الإصدار.
حل هذا:

selected.jquery.js: 543
AbstractChosen.prototype.container_width = الوظيفة () {
return this.form_field.offsetWidth + "px";
->
return $(this.form_field).outerWidth() + "px";