Chosen: L'espace réservé pour la sélection multiple initialement masquée est coupé à 90px

Créé le 31 mars 2015 · 7Commentaires · Source: harvesthq/chosen

Lorsque Chosen est initialisé sur une sélection multiple à l'intérieur d'un conteneur masqué, lors de l'affichage du conteneur, le texte de l'espace réservé est coupé après seulement 90 pixels :

chosen-multi-cropped

L'option width de l'appel Chosen dimensionne correctement l'intégralité du contrôle, mais pas le texte/l'entrée de l'espace réservé. Après avoir cliqué pour afficher la liste déroulante des options, l'espace réservé s'agrandit à la bonne taille :

chosen-multi-ok

Voir un jsfiddle minimal (cliquez simplement sur le bouton "Afficher la sélection")

Observé sur Chrome Linux, Chrome/Firefox/IE Win.

Sizing

Source

zerocrates

👍1

Commentaire le plus utile

J'ai fait $('.chosen-select').trigger("chosen:updated"); quand il est montré comme solution de contournement

akshayvadher le 16 janv. 2017

👍3

Tous les 7 commentaires

Le problème semble être ici :

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

Pour un champ masqué, .outerWidth() renvoie une valeur erronée (dans ce cas, 100 , qui semble provenir du style de largeur 100% défini par le width option

Je ne sais pas ce qui serait une bonne solution ici, cependant. La meilleure option à laquelle je peux penser immédiatement est de définir la largeur de l'entrée de recherche sur 100% si c'est la seule chose à l'intérieur du conteneur, ou si la classe default est définie.

zerocrates le 7 avr. 2015

👍1

Je suis confronté au même problème ici. Ce problème est présent dans les 3 navigateurs installés sur mon Mac OS X 10.10.3 :

Chrome 43.0.2357.65
Safari 8.0.6
FirefoxDeveloperEdition 40.0a2

Merci!

avinash2 le 25 mai 2015

Même problème au #2029

Nous avons utilisé le remplacement CSS dans ce problème pour contourner ce problème jusqu'à ce que cela puisse être résolu.

Gneisler le 14 oct. 2015

Peut-être changer la fonction search_field_scale en :
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' }); } };