When Chosen is initialized on a multiple select inside a hidden container, upon showing the container, the placeholder text is cut off after only 90 pixels:
Chosen 调用的width选项可以正确调整整个控件的大小，但不能正确调整占位符文本/输入的大小。 单击以显示选项下拉列表后，占位符将扩展为正确的大小：
查看最小的 jsfiddle （只需单击“显示选择”按钮）
在 Chrome Linux、Chrome/Firefox/IE Win 上观察。
zerocrates
所有7条评论
问题似乎在这里：
https://github.com/harvesthq/chosen/blob/master/coffee/chosen.jquery.coffee#L506
对于隐藏的字段， .outerWidth()返回一个虚假值（在这种情况下， 100 ，这似乎来自 $# width设置的100%宽度样式width选项）。 看到这个虚假值，以下几行决定输入需要变得更小以适应（这就是为什么在这个例子中宽度最终为 90px，因为虚假宽度是 100 并且选择减去 10）。
不过，我不确定这里有什么好的解决方法。 我能立即想到的最佳选择是将搜索输入的宽度设置为100%如果它是容器内唯一的东西，或者如果设置了default类。
zerocrates
于 2015-04-07
我在这里面临同样的问题。 我的 Mac OS X 10.10.3 上安装的所有 3 个浏览器都存在此问题：
铬 43.0.2357.65
Safari 8.0.6
火狐开发者版 40.0a2
谢谢！
avinash2
于 2015-05-25
#2029 同样的问题
我们在该问题中使用了 CSS 覆盖来解决此问题，直到可以修复此问题。
Gneisler
于 2015-10-14
也许将 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'
});
}
};
janssenr
于 2016-03-16
我做了 $('.chosen-select').trigger("chosen:updated"); 当它显示为解决方法时
akshayvadher
于 2017-01-16
+1
Yaroslav-F
于 2017-03-16
+1
stadniklksndr
于 2018-08-20
相关问题
raggzy
·
5评论
gandarez
·
5评论
piercemcgeough
·
5评论
Scalamoosh
·
8评论
jbrooksuk
·
6评论
最有用的评论
我做了 $('.chosen-select').trigger("chosen:updated"); 当它显示为解决方法时