Chosen: se o select estiver inicialmente oculto, não funciona

Sim, você deve corrigir o script do café. Também sou pela capacidade de configurar elementos ocultos.

+1 encontrou este problema hoje

+1 assim como eu

Como alternativa, você pode definir a largura do div criado com um sinalizador !important :

#my_select_chzn {
  width: 100% !important;
}

Na verdade, isso o deixará mais perto de onde você precisa estar. As larguras não são perfeitas, mas tudo ficará visível.

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

Uma versão anterior do Chosen realmente testou para ver se a largura do campo do formulário foi definida via css. Nesse caso, ele não usou o cálculo de largura. Acho que prefiro esse método de correção em vez de adicionar 30 linhas de código para testar elementos ocultos. Algo assim funciona para você?

Defina a largura:

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

JS testa primeiro a largura definida:

  <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 há um pequeno bug em seu código. Se o estilo inline tiver uma largura em qualquer unidade diferente de pixels (como em), o código irá interpretá-lo como pixels. consulte a linha 56 em selected.jquery.coffee

Acho que as pessoas reclamarão continuamente sobre isso e, no final das contas, você precisará adicionar 30 linhas de código.

Olá @pfiller , isso não funciona. Tanto width () quanto css ("width") retornam 0 para elementos ocultos. Estou usando a técnica getHiddenDimensions e está funcionando bem.

btw, você precisa usá-lo para f_width e também em get_side_border_padding

1 para isso.

Grande parte da lógica no site que estou integrando Chosen depende de alguns selects serem ocultados no primeiro carregamento, então temos todos os tipos de problemas com isso.

+1 também. As verificações de visibilidade devem ser integradas.

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

E quanto à solução em que a largura da lista suspensa não é definida permanentemente na primeira inicialização e é apenas redimensionada para a largura da caixa de texto quando ela é aberta? Dessa forma, você não precisa nunca tocar na largura da entrada, apenas suponha que esteja definido com css e leia-o sempre que abrir o menu suspenso.

1 para isso. Decidi transformar Chosen em um tipo de campo para o ExpressionEngine CMS, mas os layouts de publicação de EE permitem que os campos sejam ocultados no carregamento da página.

Não tenho certeza se isso está relacionado, mas no caso do EE seria melhor se a largura fosse fluida, ou simplesmente sempre fosse 100% do elemento que a contém ...

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

Me deparei com este ... ainda está acontecendo na versão mais recente

+1
Este bug está bloqueando o uso do plug-in Chosen para aplicativos internos da Netflix

: +1: sobre este problema, encontrei este problema hoje

Você pode ocultar seu conteúdo com: position: absolute; esquerda: -999em;
Dessa forma, os leitores de tela e o Google também podem "lê-los", e a lista suspensa Escolhida FICARÁ visível ao ser exibida novamente.

Minha solicitação pull corrige esse problema, mas como a minha outra e muitos dos escolhidos, eles estão sendo ignorados. Este projeto tem muitos colaboradores com uma base de código muito pequena.

DelvarWorld, obrigado pelo seu patch. Isso tem me incomodado, e eu estava prestes a implementar uma solução semelhante e pensei em verificar se alguém já havia feito isso.

Estarei implantando isso no código de produção logo depois de testá-lo.

@DelvarWorld a que solicitação pull você está se referindo? Vejo uma solicitação de pull aberta sua e ela não resolve esse problema.

@pfiller Aquele listado acima neste tópico, https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

Mais importante do que usar o css é usar a largura "atual" do elemento ao renderizar os resultados, em vez de usar uma largura incorretamente armazenada em cache da construção de Chosen.

Houve muitas mudanças e não tenho certeza da melhor maneira de mesclá-las sozinho. Você terá uma versão mesclada em breve?

@bewest minha solicitação pull faz isso, toda vez que o menu suspenso é mostrado, ele corresponde à largura do elemento

@delvarworld eu sei, apenas para garantir que a distinção correta seja feita.

Você pode tentar trazer seu branch de largura automática atualizado com HEAD? Tentei mesclar a partir de uma verificação semelhante por volta do final de agosto, mas a caixa de entrada agora está com a largura errada (é muito larga, ultrapassando a largura do contêiner escolhido).

Estou dando uma olhada, mas também houve alguma reorganização ... o construtor foi removido em favor dos métodos de configuração e término_de_setup. Também não estou familiarizado com o coffeescript, então seu progresso na fusão pode ser mais rápido do que o meu e enviar uma solicitação de pull, minha ajuda, uma vez que parece haver muito interesse neste problema.

Na verdade, meu ramo divergiu além dessa mudança e, eventualmente, desisti de trabalhar na versão do protótipo. A culpa é minha, e acho que neste momento não é possível mesclar.

@DevarWorld Sim, ele precisa ser um pouco retrabalhado para que alguns bits entrem na implementação do Abstract. Isso deve tornar mais fácil manter as diferenças entre prototype e jquery.

Você estaria disposto a tentar novamente?

Uma colisão educada ... alguém está trabalhando nisso?

Escolhido não funciona para mim, pois está ocultando minha seleção e, em seguida, incapaz de calcular a largura. Tenho que hackear, definindo arbitrariamente uma largura em cada um dos componentes chzn no CSS. Não parece que isso funcione, e realmente nem parece normal como nos sites que eu vi em.

Eu também tive esse problema. Acontece que o método escolhido para obter a largura de um elemento foi quebrado na versão anterior do jquery (desculpe, mas não tenho os números exatos da versão). Conforme observado acima, o bug era quando um elemento não estava visível, a largura retornava 0. Esse bug é muito bem documentado e há muitas maneiras de contornar isso.

A solução para nós foi simplesmente atualizar para a versão mais recente do Jquery. Sim, tivemos que fazer alguns patches e testes de código antigo que usava jquery, mas no longo prazo ele corrige muitos problemas e reduz a necessidade de pequenos hacks em seu js / css.

Estou instalando o jquery mais recente empacotado nos rails jquery gem e jquery-ujs. Suponho que ainda seja muito antigo?

Sim, seria bom ter um número de versão real. Posso confirmar que 1.6.2 é
muito velho também.

Na quarta-feira, 16 de novembro de 2011 às 11h23, Kevin Elliott <
[email protected]

escreveu:

Estou instalando o jquery mais recente que está empacotado no rails jquery gem
e jquery-ujs. Suponho que ainda seja muito antigo?

@RoyJacobs newest atualmente está com 1,7 da forma como foi lançado.

@RoyJacobs posso confirmar que estamos usando 1.6.4 sem problemas.

Isto é estranho. Sim, a gem jquery-rails está usando jQuery 1.7. Mas ainda não está funcionando para mim.

Você pode ver que não está renderizando com largura. A inspeção mostra todas as larguras calculadas como 0 px. Isso ocorre mesmo se eu definir .chzn-select para ter uma largura em CSS ou diretamente no parâmetro de estilo da tag de seleção.

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

Certamente irritante. O select parece estar obtendo display: none (presumo pelo javascript escolhido), e só posso imaginar que não é capaz de calcular a largura corretamente.

Pensamentos?

Eu realmente gostaria de poder fazer isso funcionar em QUALQUER circunstância (mesmo que eu tenha que forçá-lo). Nada parece funcionar. Serei forçado a abandonar isso totalmente (e certamente não vou querer lidar com esse material quebrado novamente).

Certifique-se de que sua seleção tenha algum CSS aplicado, folha de estilo ou embutido. Se você fizer isso com a folha de estilo, significa que você tem que injetar o elemento no DOM antes de chamar selected ().

Mas concordo que acertar é muito difícil. Eu realmente gostaria de poder aplicar uma largura para o select escolhido via CSS. Uma classe, uma largura, px ou%.
Meu CSS ficaria assim

.example select, .example .chzn-smth {
largura: 50%;
}

E isso aplicaria a largura corretamente, não importa como, quando ou onde você chama de escolhido.

Eu tentei inline e via folha de estilo sem nenhuma mudança no comportamento.

Problema bastante substancial para lightboxes e acordeões. Alguém está trabalhando em um patch?

Acho que ninguém está! Estou chocado porque não entendo como isso pode ser usado por alguém. Não estou nem escondendo meu conteúdo artificialmente. A chamada escolhida () parece estar fazendo isso. Tão estranho.

@kevinelliott Acho que aqueles que estavam tendo esse problema seguiram em frente ou encontraram uma solução. Como eu disse, no nosso caso foi simplesmente uma questão de atualizar o jquery. Lembre-se também de que estilizamos nossoelemento para ter uma largura de 224 px e definimos 'display: none;' diretamente no elemento e não em uma folha de estilo.

Espero que isso seja útil para você e você seja capaz de fazê-lo funcionar.

Obrigado Richard. Eu atualizei meu jQuery e isso não ajudou. O estranho é que não estou escondendo meu elemento selecionado. Escolhido está escondendo isso. Então, nem tenho certeza do que está acontecendo.

@kevinelliott Np. Estou curioso, você está definindo a largura do seuelemento em tudo? Se sim, você está usando porcentagem ou pixels?

Eu sou. Estou configurando com pixels. Eu tentei defini-lo no elemento diretamente com o atributo style e também tentei em CSS.

@kevinelliott Para ser honesto, estou um pouco perdido. As únicas sugestões restantes que tenho são 1) envolver o elemento selecionado em um elemento (fazemos isso e nosso trabalho funciona bem) e 2) percorrer a biblioteca escolhida para descobrir em que ponto escolhido está ocultando seu elemento selecionado ... Eu também tive que fazer isso quando nos deparamos com nossos problemas.

Desculpe, não pude ajudar mais.

Tenho um caso, que mesmo com uma largura fixa em selecionar o escolhido cria uma largura: 0px.
Não consigo perceber porque, não funciona nesta situação e funciona noutras ...

@tiagobrito : Tenho exatamente o mesmo problema e nunca consegui resolvê-lo, resolvido ou não.

@RichardBlair Obrigado pela ajuda. Se você pensar em mais alguma coisa, diga-nos :)

+
mesmo problema, por favor, conserte

@tiagobrito , @dhampik você pode reunir uma pequena essência que demonstre o problema?

@bewest eu já descobri! É anexado quando eu uso jquery 1.4.x em meus projetos.
Na próxima segunda eu direi a versão correta do jquery que me causa a largura: 0px

@bewest eu também confirmo,
que as versões antigas do jquery (suponho, anteriores a 1.6.4)
bagunçar o layout do select, que inicialmente está oculto
Aqui estão 2 violinos:
layout bagunçado (jquery antigo): http://jsfiddle.net/dhampik/2E9fG/
layout correto (novo jquery): http://jsfiddle.net/dhampik/Rs9Z3/

Graças a Deus, a versão do jquery foi atualizada com a nova versão do framework Yii)

Eu tenho esse problema quando tento integrar o Chosen no Trac. As caixas de seleção iniciais no formulário de propriedades de um tíquete têm largura 0. As propriedades estão ocultas por padrão e podem ser expandidas clicando em um link. jQuery v1.7.1

Atualização: Eu contornei o problema, pois pelo menos o truque do CSS mencionado na postagem do blog foliotek não funcionava com o jQuery 1.7.1. Ainda não experimentei a abordagem JS.

Minha solução alternativa (para Trac):

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

para aqueles que usam jQuery <= 1.7.1

Eu resolvi esse problema usando jQuery Actual
Selecionado.jquery.js # 301 alterado de
this.f_width = this.form_field_jq.outerWidth();
para
this.f_width = this.form_field_jq.actual( 'outerWidth' );

// edite thx @koenpunt para o comentário 1.7.2

@midday De acordo com o README de jquery.actual, isso só é necessário para versões do jQuery anteriores a 1.7.2

A versão mais antiga do jQuery (> = 1.7.1) tem problemas para encontrar a largura / altura dos elementos invisíveis do DOM.

@midday, obrigado por descobrir que, depois de implementar o plug-in real, ele corrigiu o problema com o escolhido

Ainda estou tendo esse problema, alguma ideia de como corrigi-lo?

O mesmo aqui ainda é um problema - não posso acreditar que isso vem acontecendo há anos ...

Eu também tive esse problema. Adoraria alguma ajuda.

Este truque do CSS parece funcionar:

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

@gyopiazza. Isso resolveu o problema para mim. Obrigada.

FWIW, descobri que definir uma largura mínima (mesmo sem! Important) em .chzn-container, .chzn-drop e .chzn-search input funciona para seleções inicialmente ocultas também.

Minha solução alternativa

css:

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

html:

em vez de definir a largura no elemento de seleção, escolho adicionar um div de invólucro ao elemento de seleção original e definir a largura do invólucro.

Escolhido agora oferece uma opção para inicializar com uma largura definida que substitui qualquer tentativa de cálculo. Esta é provavelmente uma solução alternativa satisfatória para a maioria dos casos de uso em que a seleção está oculta no ponto de inicialização:

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

Acho que essa solução alternativa é provavelmente a que faremos para corrigir esse bug. Eu realmente quero evitar incluir código que mova a seleção para fora da tela para medir, pois isso adicionaria mais complexidade.

Alguém tem problemas em fechar este bug com base nesta solução?

Eu estava usando a versão 0.9.8 e minhas seleções ocultas estavam funcionando normalmente. Hoje eu atualizei o 0.9.14 e eles pararam de funcionar. Eu estava usando a versão reduzida. Quando eu mudo para a versão normal tudo funciona bem novamente (choice.jquery.js 0.9.14). Isso é normal? É um erro no processo de minificação?

Nenhum oculto não está funcionando para mim no jQuery min ou tamanho total 0.9.14.

A nova opção 'largura' funcionou para mim. Trabalhe, pelo menos, para novas entradas escolhidas que estavam ocultas anteriormente.

@trisweb Este é um projeto de código aberto e hostilidade não é bem-vinda aqui. Há muitas pessoas aqui que deram muito tempo e energia para fazer de Chosen o que é hoje. Tente contribuir para a melhoria do projeto ou não faça comentários. Obrigado.

@kenearley Estou totalmente ciente da etiqueta do código aberto e deveria ter elaborado meu comentário para ser mais eficaz. Desculpe por isso.

Dito isso, eu realmente acho que às vezes você precisa de alguém para gritar por causa de todo o barulho.

Eu proponho que um valor zero para a largura de qualquer elemento escolhido não é lógico, e algum método confiável deve ser desenvolvido pelo qual a largura correta é determinada. Caso contrário, um padrão razoável deve ser usado e, por muitos motivos que devem ser evidentes, zero não é um padrão razoável.

Pode ser um problema difícil, por isso esse bug existe há tanto tempo, mas tenho certeza de que há alguma solução. Pessoalmente, não acho que o novo atributo 'largura' resolva o problema, já que ele ainda depende da configuração mais do que da convenção e, portanto, pode resultar no não funcionamento da largura zero escolhida no caso padrão.

Dito isso, eu realmente acho que às vezes você precisa de alguém para gritar por causa de todo o barulho.

Não. Não há necessidade de 'gritar acima do barulho'. Se alguém tiver uma opinião forte o suficiente sobre como o código deve ser escrito, ele pode oferecer uma solicitação pull ou bifurcar o repo e alterar conforme desejado.

Dito isso, agradeço seu acompanhamento e concordo que a solução atual não é a ideal. À medida que avançamos, procuraremos soluções melhores e agradeceríamos muito as solicitações de pull de qualquer pessoa que tenha interesse em alterar isso.

@kenearley Eu polidamente discordo de suas opiniões sobre retórica - mas é claro que o código fala mais alto do que as palavras sempre. Este é um problema irritante para nós no momento, então uma solicitação de pull pode chegar se eu encontrar uma boa solução.

: +1: para uma correção!

Estou de olho no Chosen há quase dois anos, e ainda é o aprimoramento de IU selecionado mais elegante que existe. Mas esse problema oculto ainda é um grande obstáculo e 100% de largura não é solução.
1 para consertar isso. Vai a equipa escolhida!

1 para consertar

Além da solução alternativa oficial que permite ao chamador definir a largura de maneira programática, eu também sugeriria uma solução alternativa decente, vagamente baseada no seguinte encadeamento:

http://stackoverflow.com/questions/1841124/find-the-potential-width-of-a-hidden-element

A solução alternativa depende basicamente desta função:

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

Que é então chamado pelo seguinte mod do código jquery.chosen (a partir de 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";
    }
};

Veja também # 795 para mais detalhes sobre isso.

Uma solução rápida. Em vez de ocultar seu select faça $(elem).chosen(options) e então um $(elem).hide() ie primeiro crie o elemento escolhido e então oculte-o. Dessa forma, o width é retido.

Ainda não foi corrigido, ainda faltam 3 anos?

1 para esta correção

A versão 0.9.8 não tinha esse bug! você costumava chamar jquery outerWidth para obter largura, agora você usa HTML offsetWidth, que resulta em zero ...

Acredito que ele queira dizer que é uma regressão, o que é promissor. Havia um
motivo para abandonar o método jQuery?

@pfiller Eu estava tendo esse problema ao usar o jQuery 1.10.2 e sua solução $("select").chosen({ width: '50%' }); funciona muito bem para mim. Esta é uma solução alternativa viável para meus casos de uso.

Eu uso $(this.form_field).outerWidth() para obter a largura do deslocamento, abaixo do código completo:

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + $(this.form_field).outerWidth() + "px";
    }
};

1 Eu realmente preciso dessa correção. Estou ocultando um formulário por padrão e o usuário deve clicar em um botão para exibi-lo. Uma vez que está oculto, não está definindo corretamente a largura das minhas seleções

@henesnarfel - Você pode tentar usar apenas a solução alternativa que @pfiller postou aqui: https://github.com/harvesthq/chosen/issues/92#issuecomment -18163306

colisão, o problema ainda está lá. Deve haver uma solução embutida para isso. Eu marcaria com +1.

A única solução que consegui pensar foi na linha 455 (pelo menos no meu editor), que retorna o seguinte código da função container_width :

return "" + this.form_field.offsetWidth + "px";

e substituiu por

return "" + $(this.form_field).outerWidth() + "px";

O problema desapareceu.

@ayyash não

Para mim, isso funcionou (preencha seus próprios tamanhos por prazer):

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

Obrigado

@Thinklabsnk Obrigado, solução agradável e rápida.

EDITAR: Isso só funciona se todos os seus elementos selecionados tiverem a mesma largura.

Esta é minha solução alternativa para isso, com base em algumas das outras sugestões. Ele clona as entradas ocultas e as anexa ao corpo para medir a largura, mas também define a visibilidade dos clones como ocultos antes de anexar, para que não sejam exibidos na tela.

Encontre esta linha de código em selected.jquery.js (linha 455 em minha versão):

        return "" + this.form_field.offsetWidth + "px";

e substitua-o por este:

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

Espero que ajude.

@danjjohnson Obrigado, isso

A única coisa é que eu tive que mudar:

clone.offsetWidth; 

para

clone.outerWidth();

Por algum motivo, clone.offsetWidth estava me dando um valor indefinido.

Atenciosamente,

Este bug acontece no Firefox, nunca teste no Chrome ou outros.

1ª imagem (no topo)
A largura do conjunto escolhido, pois tem barra de rolagem, enquanto não tem. Este é um resultado incorreto.

2ª imagem (meio)
Largura do conjunto escolhido, pois tem uma barra de rolagem como a primeira imagem, mas desta vez tem uma barra de rolagem que está correta.

3ª imagem (inferior)
É assim que a primeira imagem deve ser, embora não tenha barra de rolagem. Este teste foi definido como largura escolhida para width: 100% !important

: thumbsup: para @danjjohnson de correção com @johnmerced 's modificação

Eu tenho outra correção, simples e funciona. O ponto em não permite que a largura se torne zero:

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

Olá,
minha sugestão para este problema é uma combinação das soluções postadas até agora (escolhido 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";
                }
            }
        }
    };

Basta definir uma largura css estática em px para as seleções ocultas.

Uma correção geral ainda é necessária.

O problema aqui é que se você alterar o tamanho da janela, o select sempre aparece com o mesmo tamanho que foi inicializado. Acho que uma solução melhor seria redimensionar a seleção quando mostrada ou quando a janela for redimensionada, ao invés de adivinhar a largura que ela deve ter na inicialização quando está oculta.

Não há como alterar dinamicamente o tamanho do objeto escolhido? Como eu sei quando alterar o tamanho (evento de redimensionamento ou onShow ou semelhante), pode ser uma solução alternativa. Existe uma função API para alterar o tamanho do objeto escolhido? Ou reinicializar de alguma forma?

: +1: para uma correção. Corri para isso hoje

: +1: _Muito_ tempo perdido rastreando isso.

Ainda estou tendo problemas com o tamanho dos modais. Algum plano de consertá-lo na versão 4.0?

@danjjohnson sua correção não corrige o problema quando o primeiro elemento é muito menor que os outros

baseado em @danjjohnson foi o que funcionou para mim

hackear

encontrar linha

return "" + this.form_field.offsetWidth + "px";

substituir com

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

$ ('selecionar'). escolhido ({largura: '100%'}); por @pfiller funcionou para mim em um painel dobrável.

Obrigado

Como posso me livrar da classe de pesquisa escolhida, já que não consigo carregar os ativos no diretório do meu projeto?

Tive que adicionar um tempo limite, ao carregar seleções estáticas de um modelo que ainda não havia sido renderizado. Nada na hierarquia tinha métricas quando tentou a inicialização. Encapsulá-lo em um tempo limite zero, pelo menos empurrou a inicialização para o final da fila de eventos.

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

Acabei de ser mordido por esse bug, 100% consertou o problema para mim.

@harvesthq você aceitaria uma solicitação pull corrigindo isso? Ainda não tenho certeza sobre a melhor solução, mas ficaria feliz em corrigir e fazer uma solicitação de pull: coração:

Uma solução alternativa robusta para isso é usar ng-if em vez de ng-show. Funciona perfeitamente e é simples.

Eu descobri que ng-if é a escolha preferida em muitas situações. Não apenas reparando ng-select quebrado, mas também para permitir controladores recursivos (usando uma combinação de ng-if, ng-controller, ng-init e ng-template).

então parece que esse problema de 4 anos ainda não foi resolvido?!?!

+1

Enquanto isso ... Estou usando select2

Existe alguma maneira de ter um spinner na área expandindo quando clicado na lista de opções escolhida, isso deve acontecer enquanto os dados estão sendo anexados ao jquery escolhido. Estou processando um grande número de registros no jquery escolhido e leva tempo para processá-los e mostrá-los. ??

Que bug épico de 5 anos ... e ainda mordendo as pessoas (ai!).

O Google tem um bug semelhante com seu mapa que não é exibido corretamente em um div oculto. no entanto, esses dois problemas têm soluções alternativas que são simples de implementar.

Sim, eu bati no bug do Google Maps no ano passado IIRC, mas quantas pessoas passaram metade do dia praguejando e tentando várias coisas antes de encontrar este relatório? Erros como esses em bibliotecas populares perdem horas. Multiplicado pelo número de pessoas que aprendem qualquer uma dessas bibliotecas a cada ano, os custos agregados são provavelmente enormes ... Se eles não vão consertar, tudo bem. Corrigir neste ponto pode interagir estranhamente com um grande número de soluções alternativas implantadas, talvez ... Nesse caso, eles devem admitir que não estão corrigindo e documentar a solução alternativa em algum lugar proeminente na documentação para que as pessoas não tenham dificuldade em fazer (ou perca) prazos sobre essas coisas.

Minha correção "geral" é semelhante a outras, e presume que todas as larguras de todos os meus selects na marcação são 100% de seu div pai. Usamos bootstrap, então este é o nosso caso.

Execute este código logo após inicializar .chosen () no carregamento da página.

`` `
$ (".contêiner escolhido"). each (function (i, elem) {
if ($ (elem) .width () == 0) {
$ (elem) .width ("100%");
}
});
`` ``

Para aqueles que tiveram um problema em que se o elemento estava inicialmente dentro de um contêiner oculto css e, em seguida, quando tornado visível tinha uma largura de 0px - a correção que encontrei foi definir a largura na configuração js;

var config = { '.chosen-select' : {}, '.chosen-select-width' : {width:"95%"} } for (var selector in config) { $(selector).chosen(config[selector]); }

Em seguida, dei às entradas de seleção a classe css escolhido-selecionar-largura

<select name="f01" class="chosen-select-width" id="item_select_staff">

Pareceu funcionar com a v1.6.2 escolhida e a versão 3.1.1 do jquery.

Eu apenas deixo a opção de largura padrão escolhida (automática) e adiciono

.chosen-container { min-width:5em; }

ao CSS do meu site (ajustando a largura mínima conforme necessário). Isso faz com que nunca fique 0px (ou apenas muito pequeno para usar) enquanto ainda se ajusta à largura ideal do select quando possível (forçar uma largura de 100% ou algo nesse sentido não funciona bem quando você seleciona elementos alinhados com outro conteúdo e isso método aborda o problema central, bem como permite a seleção de elementos em linha e aparentemente oferece a implementação mais simples e direta).

Como isso ainda está quebrado depois de SETE anos?

Minha alternativa com o bootstrap 3 é adicionar o seguinte estilo:

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

Minha alternativa com o bootstrap 3 é adicionar o seguinte estilo:

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

Compre, então a lista suspensa ainda não aparece ....

já está documentado
https://harvesthq.github.io/chosen/options.html
Verifique a opção width e sua descrição

@qbadev Embora isso torne o elemento não dimensionado para caber no conteúdo quando necessário, eu realmente não vejo isso como uma correção (especialmente quando usar min-width fornece um resultado melhor do que este).

A descrição da documentação efetivamente apenas chama o bug (que deve ser possível resolver) e menciona o uso disso como uma possível solução alternativa para o bug.

@koenvanderlinden recomenda min-width:90%; então é normalmente 90% de largura com ele indo para até 100% de largura se o conteúdo do select exigir. Então, novamente, eu ainda opto por min-width:5em; (valor em exato variando dependendo do caso de uso), então nunca é muito pequeno, mas ainda tenta se expandir para se ajustar ao conteúdo da seleção em vez de dimensionar com base no pai elemento.

@KZeni Eu não disse que é uma solução. Está apenas documentado. E é uma boa solução. Meu principal problema era que o Chosen tinha quase 0 de largura após o init. Agora, depois de "consertar", posso ver o escolhido e fazer com ele o que quiser usando classes CSS aplicadas ao elemento pai.

Eu já enfrentei esses problemas muitas vezes antes, que não podiam ser calculados porque o objeto tinha 0 largura. Não pode ser resolvido de forma universal, pois cada aplicativo é diferente.
Então, quando a seleção está visível em um momento de inicialização, nenhuma ação é necessária, mas se estiver oculta, usar a opção width é uma forma de ser usada.

Suporte de largura personalizada
Usar uma largura personalizada com Chosen é tão fácil quanto passar uma opção ao criar Chosen:
$(".chosen-select").chosen({width: "95%"});

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

Eu encontrei este problema após a atualização do jQuery de 1. * para 3. * release.
Resolvido que:

escolhido.jquery.js: 543
AbstractChosen.prototype.container_width = function () {
return this.form_field.offsetWidth + "px";
->
return $(this.form_field).outerWidth() + "px";