Chosen: si select est initialement masqué, ne fonctionne pas

Oui, vous devriez patcher le script de café. Je suis également pour la possibilité de configurer des éléments cachés.

+1 a rencontré ce problème aujourd'hui

+1 comme moi

Pour contourner le problème, vous pouvez définir la largeur du div créé avec un indicateur !important :

#my_select_chzn {
  width: 100% !important;
}

En fait, cela vous rapprochera de l'endroit où vous devez être. Les largeurs ne sont pas parfaites, mais tout sera visible.

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

Une version antérieure de Chosen a en fait testé pour voir si la largeur du champ de formulaire était définie via css. Si c'est le cas, il n'a pas utilisé le calcul de la largeur. Je pense que je préfère cette méthode de correction à l'ajout de 30 lignes de code pour tester les éléments cachés. Est-ce que quelque chose comme ça fonctionnerait pour vous ?

Définissez la largeur :

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

Tests JS pour définir la largeur en premier :

  <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 il y a un petit bug dans votre code. Si le style en ligne a une largeur dans une unité autre que les pixels (comme em), le code l'interprétera comme des pixels. voir ligne 56 dans choose.jquery.coffee

Je pense que les gens s'en plaindront continuellement et vous devrez finalement ajouter ces 30 lignes de code.

Salut @pfiller , cela ne fonctionne pas. width() et css("width") renvoient 0 pour les éléments cachés. J'utilise la technique getHiddenDimensions et cela fonctionne bien.

btw, vous devez l'utiliser à la fois pour f_width et aussi dans get_side_border_padding

+1 pour cela.

Une grande partie de la logique du site sur lequel j'intègre Chosen repose sur le fait que certaines sélections sont masquées lors du premier chargement, nous rencontrons donc toutes sortes de problèmes avec cela.

+1 aussi. Les contrôles de visibilité doivent être intégrés.

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

Qu'en est-il de la solution où la largeur de la liste déroulante n'est pas définie de manière permanente au premier démarrage et est simplement redimensionnée à la largeur de la zone de texte lorsqu'elle s'ouvre ? De cette façon, vous n'avez jamais à toucher à la largeur de l'entrée, supposez simplement qu'elle est définie avec CSS et lisez-la chaque fois que vous ouvrez la liste déroulante.

+1 pour cela. J'ai décidé de transformer Chosen en un type de champ pour le CMS ExpressionEngine, mais les mises en page de publication d'EE permettent de masquer les champs lors du chargement de la page.

Je ne sais pas si cela est lié, mais dans le cas d'EE, il serait préférable que la largeur soit fluide ou qu'elle soit simplement toujours à 100% de son élément contenant ...

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

Je suis tombé sur celui-ci... ça se passe toujours dans la dernière version

+1
Ce bug bloque l'utilisation du plugin Chosen pour les applications internes sur Netflix

:+1: sur ce problème, rencontré ce problème aujourd'hui

Vous pouvez masquer votre contenu avec : position : absolue ; gauche : -999em ;
De cette façon, les lecteurs d'écran et Google peuvent également les "lire", et votre liste déroulante Chosen SERA visible lors de sa réaffichage.

Ma demande d'extraction résout ce problème, mais comme mon autre et beaucoup de ceux choisis, ils sont ignorés. Ce projet a trop de contributeurs avec une base de code trop petite.

DelvarWorld, merci pour votre patch. Cela m'a dérangé, et j'étais sur le point de mettre en œuvre une solution similaire et j'ai pensé que je vérifierais si quelqu'un l'avait déjà fait.

Je le déploierai dans le code de production peu de temps après l'avoir testé.

@DelvarWorld à quelle pull request faites-vous référence ? Je vois une demande d'extraction ouverte de votre part et elle ne résout pas ce problème.

@pfiller Celui répertorié ci-dessus dans ce fil, https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

Plus important que d'utiliser le CSS est d'utiliser la largeur "actuelle" de l'élément lors du rendu des résultats, au lieu d'utiliser une largeur incorrectement mise en cache à partir de la construction de Chosen.

Il y a eu de nombreux changements, et je ne suis pas tout à fait sûr de la meilleure façon de les fusionner moi-même. Aurez-vous une version fusionnée sous peu ?

@bewest ma pull request fait cela, chaque fois que la liste déroulante est affichée, elle correspond à la largeur de l'élément

@delvarworld Je sais, je m'assure simplement que la bonne distinction est faite.

Pouvez-vous essayer de mettre à jour votre branche auto-width avec HEAD ? J'ai essayé de fusionner à partir d'une caisse similaire vers la fin du mois d'août, mais la zone de saisie est maintenant de la mauvaise largeur (elle est trop large, débordant de la largeur du conteneur choisi).

Je jette un œil, mais il y a aussi eu une réorganisation... le constructeur a été supprimé au profit d'une méthode setup et finish_setup. Je ne connais pas non plus coffeescript, donc votre progression dans la fusion pourrait être plus rapide que la mienne et la soumission d'une pull request à mon aide, car il semble y avoir beaucoup d'intérêt pour ce problème.

En fait, ma branche a divergé au-delà de ce changement, et j'ai finalement renoncé à travailler sur la version prototype. Ma faute, et je pense qu'à ce stade, ce n'est pas fusionnable.

@DevarWorld Oui, il doit être retravaillé un peu pour que certains bits

Seriez-vous prêt à retenter l'expérience ?

Une bosse polie... est-ce que quelqu'un travaille là-dessus ?

Chosen ne fonctionne pas pour moi car il cache ma sélection, puis incapable de calculer la largeur. Je dois le pirater en définissant arbitrairement une largeur sur chacun des composants chzn en CSS. Cela ne semble pas être la façon dont cela est censé fonctionner, et cela n'a même pas l'air normal comme sur les sites Web sur lesquels je l'ai vu.

J'ai également rencontré ce problème. Il s'avère que la méthode choisie pour obtenir la largeur d'un élément est cassée dans la version antérieure de jquery (je suis désolé, mais je n'ai pas les numéros de version exacts). Comme indiqué ci-dessus, le bogue était que lorsqu'un élément n'était pas visible, la largeur renvoyait 0. Ce bogue est très bien documenté et il existe de nombreuses façons de le contourner.

La solution pour nous était simplement de passer à la dernière version de Jquery. Oui, nous avons dû corriger et tester l'ancien code qui utilisait jquery, mais à long terme, cela résout beaucoup de problèmes et réduit le besoin de petits hacks tout au long de votre js/css.

J'installe le dernier jquery qui est empaqueté dans les rails jquery gem et jquery-ujs. Je suppose que c'est encore trop vieux ?

Oui, un numéro de version réel serait bien d'avoir. Je peux confirmer que 1.6.2 est
trop vieux aussi.

Le mer. 16 novembre 2011 à 11:23, Kevin Elliott <
ré[email protected]

a écrit:

J'installe le dernier jquery qui est emballé dans le gem jquery rails
et jquery-ujs. Je suppose que c'est encore trop vieux ?

@RoyJacobs newest est actuellement 1.7 car il a été publié.

@RoyJacobs Je peux confirmer que nous utilisons la 1.6.4 sans problème.

Cela est étrange. Oui, la gem jquery-rails utilise jQuery 1.7. Mais ça ne marche toujours pas pour moi.

Vous pouvez voir qu'il n'est pas rendu avec une largeur. L'inspection montre que toutes les largeurs calculées sont de 0px. Cela se produit même si je définis .chzn-select pour avoir une largeur en CSS ou directement dans le paramètre de style de la balise select.

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

Certainement ennuyeux. La sélection semble obtenir display:none (je suppose à partir du javascript choisi), et je ne peux qu'imaginer qu'il n'est alors pas en mesure de calculer correctement la largeur.

Les pensées?

J'aimerais vraiment pouvoir faire fonctionner cela dans TOUTES les circonstances (même si je dois le forcer). Rien ne semble fonctionner. Je serai obligé de l'abandonner complètement (et je ne voudrai certainement plus m'occuper de ce truc cassé).

Assurez-vous que votre sélection a un CSS appliqué, une feuille de style ou en ligne. Si vous le faites avec une feuille de style, cela signifie que vous devez injecter l'élément dans le DOM avant d'appeler choisi().

Mais je suis d'accord qu'il est très difficile de bien faire les choses. J'aimerais vraiment pouvoir appliquer une largeur au select choisi via CSS. Une classe, une largeur, px ou %.
Mon CSS ressemblerait alors à

.exemple sélectionner, .exemple .chzn-smth {
largeur : 50 % ;
}

Et cela appliquerait la largeur correctement, peu importe comment, quand ou où vous appelez choisi.

Je l'ai essayé en ligne et via une feuille de style sans aucun changement de comportement.

Problème assez important pour les caissons lumineux et les accordéons. Quelqu'un travaille sur un patch ?

Je pense que personne ne l'est ! Je suis choqué parce que je ne comprends pas comment cela est utilisable par qui que ce soit. Je ne cache même pas artificiellement mon contenu. L'appel selected() semble le faire. Si étrange.

@kevinelliott Je pense que ceux qui avaient ce problème sont passés à autre chose ou ont trouvé un correctif. Comme je l'ai dit, dans notre cas, il s'agissait simplement de mettre à niveau jquery. Gardez également à l'esprit que nous avons stylisé notreélément pour avoir une largeur de 224px et nous définissons 'display: none;' directement sur l'élément et non dans une feuille de style.

J'espère que cela vous sera utile et que vous pourrez le faire fonctionner.

Merci Richard. J'ai mis à jour mon jQuery et cela n'a pas aidé. La chose étrange est que je ne cache pas mon élément select. Choisi le cache. Donc je ne suis même pas sûr de ce qui se passe.

@kevinelliott Np. Je suis curieux, réglez-vous la largeur de votreélément du tout ? Si oui, utilisez-vous des pourcentages ou des pixels ?

Je suis. Je le mets avec des pixels. J'ai essayé de le définir directement sur l'élément avec l'attribut style, et je l'ai également essayé en CSS.

@kevinelliott Pour être honnête, je suis un peu perdu. Les seules suggestions restantes que j'ai sont 1) d'envelopper l'élément select dans un élément (nous le faisons et nos travaux fonctionnent bien), et 2) de parcourir la bibliothèque choisie pour savoir à quel point choisi cache votre élément select ... J'ai également dû le faire lorsque nous avons rencontré nos problèmes.

Désolé, je ne pourrais pas être plus utile.

J'ai un cas, que même avec une largeur fixe dans la sélection choisie, créez une largeur: 0px.
Je ne comprends pas pourquoi, ne fonctionne pas dans cette situation et fonctionne dans d'autres...

@tiagobrito : J'ai exactement le même problème et je n'ai jamais pu le résoudre, corrigé ou non.

@RichardBlair Merci pour votre aide. Si vous pensez à autre chose, faites-le nous savoir :)

+
même problème, s'il vous plaît, corrigez-le

@tiagobrito , @dhampik pouvez-vous mettre en place un petit aperçu qui démontre le problème ?

@bewest j'ai déjà compris ! Il s'ajoute lorsque j'utilise jquery 1.4.x dans mes projets.
Lundi prochain je vous dirai la bonne version de jquery qui me cause la largeur : 0px

@bewest je confirme aussi,
que les anciennes versions de jquery (je suppose, antérieures à la 1.6.4)
gâcher la mise en page de select, qui est initialement caché
Voici 2 violons :
mise en page en désordre (ancien jquery): http://jsfiddle.net/dhampik/2E9fG/
mise en page correcte (nouveau jquery): http://jsfiddle.net/dhampik/Rs9Z3/

Dieu merci, la version de jquery a été mise à jour avec la nouvelle version à venir du framework Yii)

J'ai ce problème lorsque j'essaie d'intégrer Chosen dans Trac. Les cases de sélection initiales sous la forme de propriétés d'un ticket ont une largeur de 0. Les propriétés sont masquées par défaut et peuvent être étendues en cliquant sur un lien. jQuery v1.7.1

Mise à jour : j'ai contourné le problème car au moins l'astuce CSS mentionnée dans l'article de blog foliotek ne fonctionnait pas avec jQuery 1.7.1. Je n'ai pas encore essayé l'approche JS.

Ma solution de contournement (pour Trac) :

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

pour ceux qui utilisent jQuery <= 1.7.1

J'ai contourné ce problème en utilisant jQuery Actual
Choisi.jquery.js#301 changé de
this.f_width = this.form_field_jq.outerWidth();
à
this.f_width = this.form_field_jq.actual( 'outerWidth' );

//modifier merci @koenpunt pour le commentaire 1.7.2

@midday Selon le README de jquery.actual, cela n'est nécessaire que pour les versions jQuery antérieures à 1.7.2

L'ancienne version de jQuery(>=1.7.1) a du mal à trouver la largeur/hauteur des éléments DOM invisibles.

@midi merci d'avoir trouvé qu'après avoir implémenté le plugin réel, il a résolu le problème avec choisi

J'ai toujours ce problème, des idées pour le résoudre ?

Idem ici, toujours un problème - je ne peux pas croire que cela dure depuis des années...

J'ai également rencontré ce problème. J'aimerais de l'aide.

Cette astuce CSS semble fonctionner :

/* 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. Cela a résolu le problème pour moi. Merci.

FWIW J'ai découvert que la définition d'une largeur minimale (même sans !important) sur les entrées .chzn-container, .chzn-drop et .chzn-search fonctionne également pour les sélections initialement masquées.

Ma solution de contournement

css :

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

html :

au lieu de définir la largeur dans l'élément select, je choisis d'ajouter un wrapper div à l'élément select original et de définir la largeur de l'enveloppe.

Chosen propose désormais une option d'initialisation avec une largeur définie qui annule toute tentative de calcul. C'est probablement une solution de contournement satisfaisante pour la plupart des cas d'utilisation où la sélection est masquée au point d'initialisation :

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

Je pense que cette solution de contournement est probablement celle que nous allons faire pour corriger ce bogue. Je veux vraiment éviter d'inclure du code qui déplace la sélection hors de l'écran pour mesurer car cela ajouterait plus de complexité.

Quelqu'un a-t-il un problème avec la fermeture de ce bogue sur la base de cette solution ?

J'utilisais la version 0.9.8 et mes sélections cachées fonctionnaient normalement. Aujourd'hui, j'ai mis à jour la version 0.9.14 et ils ont cessé de fonctionner. J'utilisais la version minnifiée. Lorsque je passe à la version normale, tout fonctionne à nouveau correctement (chosen.jquery.js 0.9.14). Est-ce normal? C'est une erreur dans le processus de minnification ?

Ni caché ne fonctionne pour moi sur jQuery min ou pleine taille 0.9.14.

La nouvelle option « largeur » a fonctionné pour moi. Travaillez, au moins, pour les nouvelles entrées choisies qui étaient auparavant cachées.

@trisweb Ceci est un projet open source et l'hostilité n'est pas la bienvenue ici. Il y a beaucoup de gens ici qui ont donné beaucoup de temps et d'énergie pour faire de Chosen ce qu'il est aujourd'hui. Essayez de contribuer à l'amélioration du projet ou abstenez-vous de commenter. Merci.

@kenearley Je suis pleinement conscient de l'étiquette open source et j'aurais dû concevoir mon commentaire pour qu'il soit plus efficace. Désolé pour ça.

Cela dit, je pense vraiment que parfois vous avez besoin de quelqu'un pour crier sur tout le bruit.

Je propose qu'une valeur zéro pour la largeur de tout élément choisi n'est pas logique, et une méthode fiable devrait être conçue par laquelle la largeur correcte est déterminée. A défaut, une valeur par défaut raisonnable devrait être utilisée, et pour de nombreuses raisons qui devraient aller de soi, zéro n'est pas une valeur par défaut raisonnable.

Cela peut être un problème difficile, c'est pourquoi ce bogue existe depuis si longtemps, mais je suis convaincu qu'il existe une solution. Personnellement, je ne pense pas que le nouvel attribut 'width' résolve le problème, car cela repose toujours plus sur la configuration que sur la convention, et pourrait donc entraîner le non-fonctionnement de la largeur zéro choisie dans le cas par défaut.

Cela dit, je pense vraiment que parfois vous avez besoin de quelqu'un pour crier sur tout le bruit.

Non. Il n'est pas nécessaire de "crier pour le bruit". Si quelqu'un est suffisamment convaincu de la façon dont le code doit être écrit, il peut proposer une pull request ou forker le repo et le modifier à sa guise.

Cela dit, j'apprécie votre suivi et conviens que la solution actuelle n'est pas idéale. Au fur et à mesure que nous avançons, nous chercherons de meilleures solutions et apprécierions grandement les demandes d'extraction de toute personne intéressée à ce que cela change.

@kenearley Je suis poliment en désaccord avec vos opinions sur la rhétorique, mais bien sûr, le code parle toujours plus fort que les mots. C'est un problème irritant pour nous en ce moment, donc une demande d'extraction peut arriver si je trouve une bonne solution.

:+1: pour un correctif !

J'ai l'œil sur Chosen depuis près de deux ans maintenant, et c'est toujours l'amélioration de l'interface utilisateur sélectionnée la plus élégante qui soit. Mais ce problème caché est toujours un problème majeur, et la largeur à 100% n'est pas une solution.
+1 pour résoudre ce problème. Allez équipe choisie!

+1 pour le correctif

En plus de la solution de contournement officielle qui permet à l'appelant de définir la largeur par programmation, je suggérerais également une solution de contournement décente, vaguement basée sur le fil suivant :

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

La solution de contournement repose essentiellement sur cette fonction :

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

Celui-ci est alors appelé par le mod suivant du code jquery.chosen (à partir de la 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";
    }
};

Voir aussi #795 pour plus de détails à ce sujet.

Une solution rapide. Au lieu de cacher votre select faites $(elem).chosen(options) puis un $(elem).hide() c'est- width est conservé.

Ce n'est pas encore réglé, 3 ans ouvert ?

+1 pour ce correctif

La version 0.9.8 n'avait pas ce bogue ! vous aviez l'habitude d'appeler jquery externalWidth pour obtenir la largeur, maintenant vous utilisez HTML offsetWidth, qui revient à zéro...

Je crois qu'il veut dire que c'est une régression, ce qui est prometteur. Y avait-il un
raison de s'éloigner de la méthode jQuery ?

@pfiller J'avais ce problème avec jQuery 1.10.2 et votre solution $("select").chosen({ width: '50%' }); fonctionne très bien pour moi. C'est une solution de contournement pour mes cas d'utilisation.

J'utilise $(this.form_field).outerWidth() pour obtenir la largeur de décalage, sous le code complet :

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

+1 J'ai vraiment besoin de ce correctif. Je cache un formulaire par défaut et l'utilisateur doit cliquer sur un bouton pour l'afficher. Comme il est caché, il ne définit pas correctement la largeur de mes sélections

@henesnarfel - Vous pouvez essayer d'utiliser simplement la solution de contournement que @pfiller a publiée ici : https://github.com/harvesthq/chosen/issues/92#issuecomment -18163306

bosse, le problème est toujours là. Il devrait y avoir une solution intégrée pour cela. Je donnerais +1 à ça.

La seule solution à laquelle je pouvais penser était d'aller à la ligne 455 (au moins sur mon éditeur), qui renvoie le code suivant à partir de la fonction container_width :

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

et l'a remplacé par

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

Le problème a disparu.

@ayyash ne

Pour moi, cela a fait l'affaire (remplissez vos propres tailles pour le plaisir):

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

Merci

@Thinklabsnk Merci, solution agréable et rapide.

EDIT: Cela ne fonctionne que si tous vos éléments sélectionnés auront la même largeur.

Voici ma solution de contournement pour cela, basée sur certaines des autres suggestions. Il clone les entrées masquées et les ajoute au corps afin de mesurer la largeur, mais il définit également la visibilité des clones sur masqués avant l'ajout, afin qu'ils ne soient pas affichés à l'écran.

Trouvez cette ligne de code dans choose.jquery.js (ligne 455 dans ma version):

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

et remplacez-le par celui-ci :

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

J'espère que cela pourra aider.

@danjjohnson Merci, ça a marché !

La seule chose est que j'ai dû changer:

clone.offsetWidth; 

à

clone.outerWidth();

Pour une raison quelconque, clone.offsetWidth me donnait une valeur indéfinie.

Meilleures salutations,

Ce bug se produit dans Firefox, ne testez jamais sur Chrome, ou autres.

1ère image (en haut)
La largeur de jeu choisie car elle a une barre de défilement alors qu'elle n'en a pas. C'est un résultat incorrect.

2e image (au milieu)
La largeur choisie est définie car elle a une barre de défilement comme la première image, mais cette fois, elle a une barre de défilement correcte.

3ème image (en bas)
C'est ainsi que la première image devrait être alors qu'elle n'a pas de barre de défilement. Ce test, j'ai été défini comme largeur choisie sur width: 100% !important

: thumbsup: pour @danjjohnson 'de la solution avec @johnmerced' modification s

J'ai une autre solution, simple et fonctionne. Le point d'entrée ne laisse pas la largeur devenir nulle :

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

Bonjour,
ma solution pour ce problème est une combinaison des solutions publiées jusqu'à présent (choisi 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";
                }
            }
        }
    };

Définissez simplement une largeur css statique en px pour les sélections cachées.

Un correctif global est toujours nécessaire.

Le problème ici est que si vous modifiez la taille de la fenêtre, la sélection apparaît toujours à la même taille qu'elle a été initialisée. Je pense qu'une meilleure solution serait de redimensionner la sélection lorsqu'elle est affichée ou lorsque la fenêtre est redimensionnée, plutôt que de deviner la largeur qu'elle devrait prendre à l'initialisation lorsqu'elle est masquée.

N'y a-t-il aucun moyen de modifier dynamiquement la taille de l'objet choisi ? Étant donné que je sais quand changer la taille (événement de redimensionnement ou onShow ou similaire), cela pourrait être une solution de contournement. Existe-t-il une fonction API pour modifier la taille de l'objet choisi ? Ou réinitialiser en quelque sorte?

:+1: pour un correctif. Je suis tombé sur ça aujourd'hui

:+1: J'ai perdu _way_ trop de temps à traquer ça.

Toujours un problème avec la taille dans les modaux. Avez-vous l'intention de le corriger dans la version 4.0 ?

@danjjohnson votre correctif ne résout pas le problème lorsque le premier élément est beaucoup plus petit que les autres

basé sur @danjjohnson c'est ce qui a fonctionné pour moi

pirater

trouver la ligne

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

remplacer par

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

$('select').chosen({width : '100%'}); par @pfiller a fonctionné pour moi dans un panneau pliable.

Merci

Comment puis-je me débarrasser de la classe de recherche choisie car je ne parviens pas à charger les actifs dans mon répertoire de projet ?

J'ai dû ajouter un délai d'attente lors du chargement de sélections statiques à partir d'un modèle qui n'avait pas encore été rendu. Rien dans la hiérarchie n'avait de métriques lors de la tentative d'initialisation. L'envelopper dans un délai d'attente nul a au moins repoussé l'initialisation à la fin de la file d'attente des événements.

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

Je viens d'être piqué par ce bug, 100% a résolu le problème pour moi.

@harvesthq accepteriez-vous une pull request pour corriger cela ? Je ne suis pas encore sûr de la meilleure solution mais je serais heureux de corriger et de faire une demande de tirage :heart:

Une solution de contournement robuste consiste à utiliser ng-if au lieu de ng-show. Fonctionne parfaitement et est simple.

J'ai compris que ng-if est le choix préféré dans de nombreuses situations. Non seulement en réparant le ng-select cassé, mais aussi pour autoriser les contrôleurs récursifs (en utilisant une combinaison de ng-if, ng-controller, ng-init et ng-template).

il semble donc que ce problème vieux de 4 ans n'est toujours pas résolu ?!?!

+1

+1 en attendant... j'utilise select2

Existe-t-il un moyen d'avoir un spinner dans la zone qui s'étend lorsque vous cliquez sur la liste de sélection choisie, cela doit se produire pendant que les données sont ajoutées au jquery choisi. Je traite un grand nombre d'enregistrements dans une jquery choisie et cela prend du temps de les traiter et de les afficher. ??

Quel bug épique de 5 ans... et qui mord toujours les gens (aïe !).

Google a un bug similaire avec sa carte qui ne s'affiche pas correctement dans un div caché. cependant, ces deux problèmes ont des solutions de contournement simples à mettre en œuvre.

Oui, j'ai rencontré ce bug de Google Maps l'année dernière IIRC, mais combien de personnes ont passé une demi-journée à maudire et à essayer diverses choses avant de trouver ce rapport ? Des bogues comme ceux-ci dans les bibliothèques populaires font perdre des heures. Multiplié par le nombre de personnes apprenant l'une ou l'autre de ces bibliothèques chaque année, les coûts agrégés sont probablement ahurissants... S'ils ne vont pas le réparer, ce n'est pas grave. Le corriger à ce stade pourrait interagir étrangement avec un grand nombre de solutions de contournement déployées... Dans ce cas, ils devraient admettre qu'ils ne le résolvent pas et documenter la solution de contournement à un endroit bien visible dans la documentation afin que les gens n'aient pas de mal à faire (ou manquer) délais sur ce genre de choses.

Mon correctif "global" est similaire aux autres et suppose que toutes les largeurs de mes sélections dans le balisage correspondent à 100 % de leur div parent. Nous utilisons bootstrap donc c'est le cas pour nous.

Exécutez ce code juste après avoir initialisé .chosen() au chargement de la page.

```
$(".chosen-container").each(function(i, elem) {
if ($(elem).width() == 0) {
$(élément).width("100%");
}
});
````

Pour ceux d'entre vous qui ont eu un problème où si l'élément était initialement à l'intérieur d'un conteneur caché CSS, puis lorsqu'il était rendu visible, il avait une largeur de 0px - le correctif que j'ai trouvé consistait à définir la largeur dans la configuration js ;

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

Ensuite, j'ai donné aux entrées de sélection la classe CSS choisie-select-width

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

Semblait faire l'affaire avec la v1.6.2 choisie et la version 3.1.1 de jquery.

Je laisse juste l'option de largeur choisie par défaut (auto) et ajoute

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

au CSS de mon site (en ajustant la largeur minimale au besoin). Cela le fait ne jamais devenir 0px (ou tout simplement trop petit pour être utilisé) tout en s'adaptant à la largeur idéale de la sélection lorsque cela est possible (forcer une largeur de 100% ou quelque chose à cet effet ne fonctionne pas bien lorsque vous avez des éléments sélectionnés en ligne avec d'autres contenus & ceci méthode résout le problème central tout en permettant des éléments de sélection en ligne et offrant apparemment la mise en œuvre la plus simple et la plus directe).

Comment est-ce encore cassé après SEPT ans ?

Ma solution de contournement avec bootstrap 3 ajoute le style suivant :

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

Ma solution de contournement avec bootstrap 3 ajoute le style suivant :

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

Achetez alors la liste déroulante ne s'affiche toujours pas .... @koenvanderlinden

c'est déjà documenté
https://harvesthq.github.io/chosen/options.html
Vérifiez l'option width et sa description

@qbadev Bien que cela fasse en sorte que l'élément ne soit pas dimensionné pour s'adapter au contenu lorsque cela est nécessaire, je ne le vois donc pas vraiment comme un correctif (en particulier lorsque l'utilisation de min-width fournit un meilleur résultat que celui-ci).

La description de la documentation appelle simplement le bogue (qui devrait être possible à résoudre) et mentionne l'utiliser comme solution de contournement potentielle pour le bogue.

@koenvanderlinden recommande min-width:90%; donc c'est normalement 90 % de largeur avec une largeur allant jusqu'à 100 % si le contenu de la sélection le nécessite. Là encore, j'opte toujours pour min-width:5em; (valeur em exacte variant selon le cas d'utilisation) donc ce n'est jamais trop petit, mais il essaie toujours de s'étendre pour s'adapter au contenu de la sélection plutôt que de dimensionner en fonction du parent élément.

@KZeni, je n'ai pas dit que c'était une solution. C'est juste documenté. Et c'est une bonne solution. Mon principal problème était que Chosen avait une largeur de presque 0 après l'initialisation. Maintenant, après "fix", je peux voir choisi et faire ce que je veux en utilisant les classes CSS appliquées à l'élément parent.

J'ai rencontré de tels problèmes plusieurs fois auparavant, cela ne pouvait pas être calculé car l'objet avait une largeur de 0. Il ne peut pas être résolu de manière universelle, car chaque application diffère.
Ainsi, lorsque la sélection est visible au moment de l'initialisation, aucune action n'est nécessaire, mais si elle est masquée, l'utilisation width option

Prise en charge de la largeur personnalisée
Utiliser une largeur personnalisée avec Chosen est aussi simple que de passer une option lorsque vous créez Chosen :
$(".chosen-select").chosen({width: "95%"});

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

J'ai trouvé ce problème après la mise à niveau de jQuery de la version 1.* à la version 3.*.
Résolu ça :

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