Chosen: Correction du problème de largeur zéro

Duplicata du #92.

J'ai dû faire ce changement sur le correctif:
if (/px/.test(this.form_field_jq.css("width")))){
this.f_width = this.form_field_jq.css("width").replace("px", "");
} autre {
this.f_width = this.form_field_jq.css("largeur");
}
puisque this.form_field_jq.css("largeur"); renvoyait la largeur avec px à la fin

J'ai une solution, et cela fonctionne bien dans mon projet:

this.f_width = this.form_field_jq.outerWidth(); // ajouter le code ci-dessous sous cette ligne à choose.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;
  }

J'espère que cela aidera quelqu'un, car cela fonctionne bien dans mon projet.

Je viens d'ajouter la règle CSS suivante :

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

Merci fabioduque ! La définition de CSS pour le conteneur choisi a résolu mon problème !

Vous n'avez vraiment pas besoin de définir la largeur en CSS. Vous pouvez le faire correctement lorsque vous initialisez Chosen.

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

En fait, j'ai créé un bindingHandler KO pour générer les éléments que j'ai choisis, et tous n'ont pas une largeur de 100%, donc CSS est la voie à suivre pour moi. Même si je pouvais définir la largeur comme option dans mon bindingHandler.

Merci @fabioduque Cela a aussi fonctionné pour moi !

@pfiller , merci ! ça a résolu mon problème.

pourquoi cela arrive-t-il parfois ? :(

J'ai utilisé l'approche css, car je ne voulais pas regarder tous les endroits que j'ai utilisés choisis (et d'autres développeurs pourraient avoir le même problème lors de la création de nouvelles vues). Ainsi, le CSS résout le problème globalement. Merci @fabioduque

Je rencontrais ce problème avec la logique conditionnelle dans l'un de mes plugins WordPress ... en particulier avec la largeur définie sur 0px ... même après l'initialisation (que je mets en file d'attente des champs choisis avec chosen:ready donc si c'est déjà init et je cache le div parent) ... mais de toute façon, c'est ce que j'avais l'habitude de corriger lorsque mon code jQuery s'exécute pour afficher l'élément DIV parent avant d'exécuter 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' );

Si quelqu'un d'autre rencontre toujours ce problème, vérifiez lorsque vous appelez $(".chosen-select").chosen(). J'avais une liste d'appels de fonction javascript au chargement de la page, lorsque j'ai déplacé l'appel .chosen() en haut de la liste, il a appliqué la largeur correctement, plus de largeur nulle. Les fonctions que je l'ai déplacées ci-dessus récupéraient des données et effectuaient de nombreuses opérations dom.

pourquoi ai-je 2 icônes de recherche, j'ai essayé les deux solutions ci-dessus-