Chosen: Correção para problema de largura zero

Duplicado de # 92.

Tive que fazer esta alteração na correção:
if (/px/.test(this.form_field_jq.css("width "))) {
this.f_width = this.form_field_jq.css ("largura"). replace ("px", "");
} outro {
this.f_width = this.form_field_jq.css ("largura");
}
desde this.form_field_jq.css ("largura"); estava retornando a largura com px no final

Eu tenho uma solução e isso funciona bem no meu projeto:

this.f_width = this.form_field_jq.outerWidth (); // adicione o código abaixo nesta linha em selected.jqeury.js

  if (this.f_width==0){ 
      var cloneObj= this.form_field_jq.clone();
      cloneObj.removeAttr('id');
      $(document.body).append(cloneObj);
      var w = cloneObj.width();
      cloneObj.remove();
      this.f_width=w;
  }

Espero que isso ajude alguém, pois funciona bem no meu projeto.

Acabei de adicionar a seguinte regra CSS:

.chosen-container
{
    width: 100% !important;
}

Obrigado fabioduque! Definir css para o contêiner escolhido resolveu meu problema!

Você realmente não precisa definir a largura em CSS. Você pode fazer isso corretamente ao inicializar o Chosen.

$(".chosen-select").chosen({ width: '100%' }); // any acceptable CSS width will work

Na verdade, eu criei um KO bindingHandler para gerar meus elementos escolhidos, e nem todos eles têm 100% de largura, então CSS é o caminho certo para mim. Embora eu pudesse definir a largura como uma opção em meu bindingHandler.

Obrigado @fabioduque Também funcionou para mim!

@pfiller , obrigado! isso resolveu meu problema.

por que isso acontece às vezes? :(

Usei a abordagem css, porque não queria olhar todos os lugares que usei escolhidos (e outros desenvolvedores podem ter o mesmo problema ao construir novas visualizações). Portanto, o css corrige o problema globalmente. Obrigado @fabioduque

Eu estava tendo esse problema com a lógica condicional em um dos meus plug-ins do WordPress ... especificamente com a largura sendo definida como 0px ... mesmo após o init (que eu enfileiro campos escolhidos com chosen:ready então se já for init e eu escondo o div pai) ... mas de qualquer forma, isso é o que eu usei para corrigir isso quando meu código jQuery é executado para mostrar o elemento DIV pai antes de executar chosen:updated

// This is the original select field
$field = $( '#' + field );

// This is the select field wrapper that I hide (just shown for reference)
$( '.fieldset-' + field ).show();

// Chosen container ID will be original select element ID + _chosen
var $chosen_container = $( '#' + field + '_chosen' );
if( $chosen_container && $chosen_container.width() === 0 ){
    $chosen_container.css( 'width', '100%' );
}

$field.trigger( 'chosen:updated' );

Se mais alguém ainda estiver tendo esse problema, verifique quando você está chamando $ (".. Escolhido-select"). Escolhido (). Eu tinha uma lista de chamadas de função javascript no carregamento da página, quando movi a chamada .chosen () para o topo da lista, ela aplicou a largura corretamente, sem mais largura zero. As funções que movi acima estavam recuperando alguns dados e fazendo muitas operações dom.

por que estou tendo 2 ícones de pesquisa, tentei ambas as soluções acima-