Chosen: العنصر النائب للتحديد المتعدد المخفي في البداية مقطوع عند 90 بكسل

تم إنشاؤها على ٣١ مارس ٢٠١٥  ·  7تعليقات  ·  مصدر: harvesthq/chosen

عند تهيئة Chosen على تحديد متعدد داخل حاوية مخفية ، عند إظهار الحاوية ، يتم قطع نص العنصر النائب بعد 90 بكسل فقط:

chosen-multi-cropped

يؤدي الخيار width للمكالمة المختارة إلى تحديد حجم عنصر التحكم بالكامل بشكل صحيح ، ولكن ليس العنصر النائب للنص / الإدخال. بعد النقر لإظهار القائمة المنسدلة للخيارات ، يتم توسيع العنصر النائب إلى الحجم الصحيح:

chosen-multi-ok

رؤية الحد الأدنى من jsfiddle (فقط انقر فوق الزر "إظهار التحديد")

تمت ملاحظته على Chrome Linux و Chrome / Firefox / IE Win.

Sizing

التعليق الأكثر فائدة

فعلت $ ('. selected-select'). trigger ("selected: updated")؛ عندما يتم عرضه على أنه عمل حول

ال 7 كومينتر

يبدو أن المشكلة هنا:

https://github.com/harvesthq/chosen/blob/master/coffee/chosen.jquery.coffee#L506

بالنسبة للحقل المخفي ، يُرجع .outerWidth() قيمة زائفة (في هذه الحالة ، 100 ، والتي يبدو أنها قادمة من نمط العرض 100% الذي حدده width الخيار

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

أواجه نفس المشكلة هنا. هذه المشكلة موجودة في جميع المتصفحات الثلاثة المثبتة على جهاز Mac OS X 10.10.3:

Chrome 43.0.2357.65
سفاري 8.0.6
FirefoxDeveloperEdition 40.0a2

شكرا!

نفس العدد في # 2029

لقد استخدمنا تجاوز CSS في هذه المشكلة للتغلب على هذه المشكلة حتى يمكن إصلاح ذلك.

ربما قم بتغيير وظيفة search_field_scale إلى:
Chosen.prototype.search_field_scale = function () { var div, f_width, h, style, style_block, styles, w, _i, _len; if (this.is_multiple) { h = 0; w = 0; style_block = "position:absolute; left: -1000px; top: -1000px; display:none;"; styles = ['font-size', 'font-style', 'font-weight', 'font-family', 'line-height', 'text-transform', 'letter-spacing']; for (_i = 0, _len = styles.length; _i < _len; _i++) { style = styles[_i]; style_block += style + ":" + this.search_field.css(style) + ";"; } div = $('<div />', { 'style': style_block }); console.log(this.choices_count()); div.text(this.search_field.val() ? this.search_field.val() : this.choices_count() < 1 ? this.default_text : ''); console.log(div.text()); $('body').append(div); w = div.width() + 25; div.remove(); //f_width = this.container.outerWidth(); //if (w < f_width - 10) { // w = f_width - 10; //} return this.search_field.css({ 'width': w + 'px' }); } };

فعلت $ ('. selected-select'). trigger ("selected: updated")؛ عندما يتم عرضه على أنه عمل حول

+1

+1

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات