عند تهيئة Chosen على تحديد متعدد داخل حاوية مخفية ، عند إظهار الحاوية ، يتم قطع نص العنصر النائب بعد 90 بكسل فقط:
يؤدي الخيار width
للمكالمة المختارة إلى تحديد حجم عنصر التحكم بالكامل بشكل صحيح ، ولكن ليس العنصر النائب للنص / الإدخال. بعد النقر لإظهار القائمة المنسدلة للخيارات ، يتم توسيع العنصر النائب إلى الحجم الصحيح:
رؤية الحد الأدنى من jsfiddle (فقط انقر فوق الزر "إظهار التحديد")
تمت ملاحظته على Chrome Linux و Chrome / Firefox / IE Win.
يبدو أن المشكلة هنا:
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
التعليق الأكثر فائدة
فعلت $ ('. selected-select'). trigger ("selected: updated")؛ عندما يتم عرضه على أنه عمل حول