Chosen: O espaço reservado para seleção múltipla oculta inicialmente é cortado em 90px

O problema parece estar aqui:

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

Para um campo que está oculto, .outerWidth() retorna um valor falso (neste caso, 100 , que parece vir do estilo de largura 100% definido pelo width opção). Vendo esse valor falso, as linhas a seguir decidem que a entrada precisa ser menor para caber (é por isso que a largura termina como 90px neste exemplo, porque a largura falsa é 100 e Chosen subtrai 10).

Não tenho certeza do que seria uma boa correção aqui, no entanto. A melhor opção que posso pensar imediatamente é definir a largura da entrada de pesquisa para 100% se for a única coisa dentro do contêiner ou se a classe default estiver definida.

Estou enfrentando o mesmo problema aqui. Este problema está presente em todos os 3 navegadores instalados no meu Mac OS X 10.10.3:

Chrome 43.0.2357.65
Safári 8.0.6
FirefoxDeveloperEdição 40.0a2

Obrigado!

Mesmo problema em #2029

Usamos a substituição de CSS nesse problema para contornar isso até que isso possa ser corrigido.

Talvez mude a função search_field_scale para:
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' }); } };

Eu fiz $('.chosen-select').trigger("chosen:updated"); quando é mostrado como solução alternativa

+1

+1