Chosen: Chosen obtient "coupé" lorsqu'il est placé dans la zone avec "overflow:hidden".

C'est le même que le numéro 59

N'est-ce pas inévitable puisque l'élément conteneur, c'est bien "overflow :hidden" c'est exactement comme ça que CSS fonctionne. Le seul moyen de contourner cela est de rendre la liste déroulante à l'extérieur du conteneur, puis d'utiliser le positionnement absolu.

Ouais, je suis d'accord avec dfischer. Cela ne semble pas être un problème choisi. Par définition, la propriété overflow spécifie ce qui se passe si le contenu dépasse les limites d'un élément. Si vous ne voulez pas que le _overflow_ soit masqué, modifiez cette propriété.

Bien que cela soit vrai, je pense qu'il s'agit d'un cas d'utilisation courant avec les boîtes de dialogue. (Surtout la boîte de dialogue jquery)

C'est un cas d'utilisation courant, mais basé sur ce ticket, comme je l'ai mentionné précédemment... toute la structure et la mise en œuvre doivent changer si vous voulez accomplir cela.

Vous devez _requis_ pour effectuer un rendu en dehors du conteneur pour que cela se produise, puis utilisez la magie jQuery/JS pour déterminer le positionnement par rapport au déclencheur.

Le cas de jQuery Dialog ne dépend pas d'un élément conteneur, il utilise donc simplement un positionnement basé sur les dimensions centrales et la largeur de la boîte de dialogue.

Il s'agit plus d'un problème CSS, pas d'un problème choisi. Ne pas mettre de débordement : caché sur le conteneur. Vous allez devoir utiliser une autre technique pour effacer les flotteurs en dessous si c'est ce que vous faites.

Je viens d'écrire un code qui, je pense, fait ce que vous cherchez:

$.fn.extend({
choisi : fonction (données, options) {
if ($(this).parent().css("overflow") == "caché") {
// obtient les décalages entre le parent et l'enfant pour calculer le diff
//quand on pousse à l'absolu
var y = $(this).offset().top - $(this).parent().offset().top,
x = $(this).offset().left - $(this).parent().offset().left,
$t1 = $("<div/>", {
css : {
"position": "relatif",
"hauteur": $(this).parent().height,
"largeur": $(this).parent().width
}
}),
$t2 = $("<div/>", {
css : {
"position": "absolu",
"haut": oui,
"gauche": x
}
});
$t1.insertBefore($(this).parent());
$(this).parent().appendTo($t1) ;
$t2.appendTo($t1) ;
$(this).appendTo($t2) ;
}
return $(this).each(function (input_field) {
if (!($(this)).hasClass("chzn-done")) {
renvoyer new Chosen(this, data, options);
}
});
}
});

(d'ailleurs, je suis nouveau sur github à partir d'aujourd'hui, donc s'il y a un endroit différent où je devrais poster du code, faites-le moi savoir)

Ce code effectue efficacement les opérations suivantes :

1. calculer le décalage entre la boîte de sélection et le parent.
2. créez un div parent avec les mêmes dimensions que votre débordement masqué et défini sur relatif.
3. créez un parent pour la zone de sélection en créant l'élément comme absolu à l'aide des décalages x et y de l'étape 1.
4. insérer un nouveau parent avant le parent de la sélection, ajouter le div de débordement à l'intérieur du nouveau parent, ajouter ce nouveau parent sélectionné à l'intérieur du parent maître, ajouter la sélection au nouveau parent enfant.

Idée intéressante Matthew, mais je pense que cela ne fonctionnera pas dans une boîte de dialogue jQuery-UI, n'est-ce pas?

Il est plus probable que l'élément déroulant (.chzn-drop) doive être extrait du conteneur .chzn et jusqu'au corps du document...

Ajoutez simplement un style à la page et votre réponse est oui :

.ui-dialog{ overflow:visible; }

Ne fonctionne pas pour moi, car je crée mes pages en utilisant des div comme colonnes (par opposition aux td et aux tables).
J'utilise " overflow:hidden " pour empêcher le contenu en fuite de ruiner les divs voisins.

Je suppose que beaucoup d'entre vous utilisent la même structure.

Cela ne fonctionnera pas, car les boîtes de dialogue sont définies sur overflow:auto afin qu'elles puissent
avoir des barres de défilement si nécessaire.

Le ven. 29 juil. 2011 à 23:47, ethaniel
ré[email protected]
a écrit:

Ne fonctionne pas pour moi, car je crée mes pages en utilisant des div comme colonnes (par opposition aux td et aux tables).
J'utilise " overflow:hidden " pour empêcher le contenu en fuite de ruiner les divs voisins.

Je suppose que beaucoup d'entre vous utilisent la même structure.

Répondez directement à cet e-mail ou consultez-le sur GitHub :
https://github.com/harvesthq/chosen/issues/86#issuecomment-1681303

Avant d'aller plus loin dans cette conversation, ce que j'ai fait est une solution théorique. Il ne peut pas être appliqué à tous les scénarios car il suffit d'un élément ayant un contre-attribut pour le bousiller. La solution ci-dessus avec le débordement visible ne fonctionnera qu'avec l'option de dialogue redimensionnable:false. Pourquoi auriez-vous besoin d'un débordement de sélection en dehors d'un dialogue ?

Ok, voici un tas de captures d'écran qui, espérons-le, clarifient le problème.

http://i.imgur.com/9ZY9O.png
http://i.imgur.com/c2PLo.png
http://i.imgur.com/1oqZ7.png
http://i.imgur.com/ZBrQj.png

Les captures d'écran 1 et 2 montrent comment il se comporte, il n'y a pas assez d'espace pour
la liste déroulante "à l'intérieur" de la boîte de dialogue, elle défile et est masquée en tant que
résultat. C'est très maladroit à utiliser et moche et pas comment le intégré
les commandes de sélection fonctionnent (elles s'affichent au-dessus du contenu, peu importe
à quelle profondeur ils se trouvent ou quel est son style de débordement.)

Les captures d'écran 3 et 4 montrent ma solution de contournement actuelle, qui consiste à mettre un tout
tas d'espace sous la liste déroulante. C'est aussi moche et rend la forme
plus difficile à utiliser.

Donc, pour résumer, le vrai point est que les contrôles de sélection natifs ne sont pas
restreint à leur conteneur parent et si c'est possible, le
le contrôle de sélection amélioré ne devrait pas l'être non plus, car il est conçu pour être
un remplacement direct pour le contrôle natif.

Cela peut théoriquement être fait mais cela nécessiterait un système de construction/positionnement complètement différent par le plugin choisi. Ce changement serait important et nécessiterait une réécriture d'environ 30% du plugin actuel. Je considère cela comme une demande de fonctionnalité et non comme un bogue. Tous les navigateurs ont un rendu par défaut pour les éléments sélectionnés. Chosen le réplique à l'aide de divs mais n'est pas traité comme un élément sélectionné.

Comme je l'ai dit, la seule façon de le faire est un positionnement absolu À L'EXTÉRIEUR de l'élément déclenché. Il n'y a pas d'autre chemin. Correct sur @medelbrock

Bien qu'il serait très agréable d'avoir choisi de se comporter comme un widget de navigateur, je suis d'accord pour que cela soit considéré comme une fonctionnalité et non comme un bogue. Pouvons-nous actuellement définir une hauteur maximale?

@veloper : J'ai div.chzn-drop est toujours contenu dans la boîte de dialogue, il sera donc coupé, qu'il soit positionné de manière absolue ou non.

La seule façon d'arrêter cela sera de retirer le div.chzn-drop de la boîte de dialogue et d'en faire un enfant de <body> , mais comme tout le monde le fait remarquer, c'est un changement plus important que quiconque est prêt à se salir les mains en essayant.

Malheureusement, l'utilisation de overflow:visible n'est pas une option, la boîte de dialogue doit pouvoir défiler si nécessaire.

Je pense avoir résolu le problème en définissant la position du menu déroulant sur absolue et chaque fois que le paramètre déroulant est affiché, sa position.
par exemple Changer (éditer le javascript)

this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
});

à

var parent = this.dropdown.parent();
var offset = parent.offset();
dd_top = offset.top + parent.outerHeight();
dd_width = parent.width();
this.dropdown.css({
    "top": dd_top + "px",
    "left": offset.left,
    "width": dd_width + "px"
});

Je rencontre moi-même ce problème en essayant de faire fonctionner Chosen dans une boîte de dialogue d'interface utilisateur Wijmo / jQuery. Je suis peut-être loin de ma ligue ici, mais n'y a-t-il pas une solution assez simple pour que la partie "déroulante" ait "affichage: aucun" lorsqu'elle est masquée, puis "affichage: bloc" lorsqu'elle est affichée ? Vous encourriez toujours les barres de défilement lorsque la liste déroulante est ouverte, mais c'est probablement mieux que d'avoir les barres de défilement toujours présentes.

Le correctif (testé sous Chrome 13, Firefox 7 et IE 9) :

Dans le fichier choisi.css :

.chzn-conteneur .chzn-drop {
position : fixe ;
}

et dans Chosen.prototype.results_show

var offset = this.container.offset();
this.dropdown.css({
"top": (offset.top+dd_top) + "px",
"gauche": offset.gauche + "px",
"bloc de visualisation"
});

http://img30.imageshack.us/img30/4094/chosen3.png

C'est le truc, bonne réflexion @levushka. Résolu maintenant dans ma branche : https://github.com/tompaton/chosen/commit/fda07051161f3fffe6049362b6c9b66ffbe857d1

Ok, c'est un peu plus compliqué que ça. Le correctif ci-dessus ne fonctionnait pas si la page défilait.

J'ai mis à jour mon dépôt avec un ensemble de modifications qui le corrige en quelque sorte, la liste déroulante est correctement positionnée maintenant, mais si la page défile alors que la liste déroulante est visible, elle ne se déplace pas comme prévu. C'est ennuyeux, mais ce n'est pas un spectacle.

iOS 5 _pourrait_ résoudre ce problème, mais iOS ne prend actuellement pas en charge la position : corrigé de la même manière que les navigateurs de bureau. Chosen fonctionne à merveille sur le bureau, mais cela pourrait limiter ses utilisations sur les navigateurs mobiles mal conçus...

Je ne me contente pas de choisir Apple ici, l'ancienne version d'Android manque également de prise en charge de la position : corrigé.

À partir de jQuery 1.7 (pas encore publié, mais en version candidate), ils ont un test intégré pour la prise en charge de CSS Position Fixed :
http://bugs.jquery.com/ticket/6809

Cela pourrait valoir la peine de détecter jQuery 1.7 et d'utiliser leur résultat, ou de copier leur code et d'obtenir un résultat séparé sinon.

+1 pour la position à la fin de l'élément du corps.

vérifiez le widget jquery "autocomplete". assez bonne solution pour ce problème:

http://jqueryui.com/demos/autocomplete/

excellent plugin en passant.

J'ai eu ce problème principalement dans les navigateurs webkit. IE va juste mentalement avec choisi, donc je l'ai désactivé si c'est-à-dire. En utilisant jquery, je vérifie si le navigateur est un webkit, et ajuste le débordement du div contenant mes choix comme ceci :

if($.browser.webkit) $(this).css("overflow",($(this).is(":visible"))?"visible":"hidden");

où c'est le div contenant les choisis.

+1 @levushka et @tompaton Pas parfait, mais assez bon. Tout juste :)

La solution

dans Chosen.prototype.results_show

remplacer:

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

avec:

if($('.popup').length!=0) {

  var offset = this.container.offset();
  this.dropdown.css({
    "top": (offset.top+dd_top) + "px",
    "left": offset.left + "px",
    "display": "block"
  });

} else {

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

}

CSS :

   .popup .chzn-container .chzn-drop { position:fixed; }

Si vous utilisez jQuery UI ou autre chose, vous pouvez avoir des problèmes avec le z-index, alors définissez le z-index choisi sur des valeurs plus élevées (jQuery UI est-il 1010+)

Maintenant, il fonctionne dans FF et pour Chrome, vous avez besoin de :

     .popup { overflow-x:visible; overflow-y:visible; }

les éléments amoureux peuvent avoir overlow:caché sans problème.

Pourquoi ne pas afficher la liste déroulante dans le corps et utiliser la fonction de position de Jquery UI pour positionner la boîte ? http://jqueryui.com/demos/position/. C'est la méthode standard utilisée pour de nombreux widgets jquery ui.

$( ".czn-drop" ).position({
de : $( "#conteneur" ),
mon : "en haut à gauche",
à : "en bas à gauche",
});

Pardonnez-moi d'intervenir, j'ai eu le même problème avec l'affichage de la liste déroulante choisie dans une boîte de dialogue jQueryUI.
J'ai essayé les trucs habituels avec débordement mais cela gâchait mes autres dialogues.

Ce que j'ai fait à la place, c'est de définir ma boîte de dialogue à une hauteur fixe et de définir également la liste déroulante choisie à une hauteur fixe.
Ce serait bien d'avoir une option pour le faire à partir des options choisies au lieu de css.

.chzn-drop {
débordement : automatique ;
hauteur maximale : 75 pixels ;
}

Peut-être que cela aide quelqu'un d'autre.

Excusez-moi pour une question assez n00bish/RTFM, mais comment puis-je rendre la liste déroulante en dehors du conteneur (disons, sur body ) ? Pour le moment, la seule chose qui me vient à l'esprit est de forker le plugin et d'y insérer ce morceau de code. Il doit y avoir un moyen plus élégant d'y parvenir.

Y a-t-il un événement que le choix se déclenche lorsque la liste déroulante est ouverte/fermée. Si c'est le cas, je peux simplement modifier le paramètre de débordement des div parents en visible, puis en arrière. J'ai essayé avec :

$(".chzn-drop").show(0, function () { 
   $(this).parents("div").css("overflow", "visible");
});    

Et oui, ça a marché. Mais alors quand j'ai ajouté :

$(".chzn-drop").hide(0, function () {
   $(this).parents("div").css("overflow", "");
});

Cela ne fonctionnait plus. Je suppose parce que j'ai plusieurs contrôles choisis sur le formulaire. Si je pouvais ajouter ce code dans un événement d'ouverture/fermeture, je pense que cela m'amènerait là où je veux aller.

Vous pouvez écouter les liszt:showing_dropdown et liszt:hiding_dropdown envoyés sur l'élément select d'origine

Excellent ... donc cela a résolu mon problème:

$(".chzn-select").on(" liszt:showing_dropdown ", function () {
$(this).parents("div").css("overflow", "visible");
});
$(".chzn-select").on(" liszt:hiding_dropdown ", function () {
$(this).parents("div").css("overflow", "");
});

Bien sûr, cela peut ne pas fonctionner avec toutes les mises en page.

Merci... BOb

J'ai forké le code pour créer l'enfant déroulant de <body/> . Je ne l'ai pas encore assez testé, mais il fonctionne parfaitement ici -> https://github.com/gil/chosen

Pouvez-vous voir si cela résout votre problème, @tompaton ? Je pense que je dois juste détecter le défilement maintenant, pour fixer la position manuellement.

La fourche a résolu le problème d'affichage pour moi et a bien fonctionné en bas de la page où elle a limité la hauteur affichée à quelque chose de raisonnable. Cependant, le fork a empêché la fonctionnalité de sélection multiple de fonctionner.

@geoffweatherall Vraiment ? Agréable! :D À propos du problème avec la multi-sélection, qu'est-ce qui a cessé de fonctionner ? Pourriez-vous s'il vous plaît essayer le fichier example.jquery.html et me dire s'il ne fonctionne pas ? Pour moi ça a l'air d'aller.

Oui, les exemples fonctionnent bien (FF 12).

L'exemple de sélection unique se trouve dans une page html assez simple avec des "panneaux" qui utilisent le débordement caché. Cependant, l'exemple de sélection multiple est dans un "dialogue" créé à l'aide de colorbox (http://www.jacklmoore.com/colorbox) - ne me demandez pas pourquoi, le projet était comme ça quand je suis arrivé. Je suppose que cela a peut-être quelque chose à voir avec ça, je vais me renseigner.

Le fork résout le problème de coupure dans un certain nombre d'emplacements de notre application, y compris les multi-sélections qui ne sont pas imbriquées dans les colorbox (http://www.jacklmoore.com/colorbox). Je crois que le problème avec colorbox n'est pas la faute de choisi. Super fourchette :-)

En fait, j'ai trouvé un problème avec le fork qui s'affiche dans l'exemple de page (example.jquery.html). Pour le contrôle de sélection multiple, si vous cliquez dans le contrôle pour ouvrir la liste des options, puis utilisez les touches fléchées vers le haut et vers le bas pour naviguer dans la liste, la liste des options fait un déplacement surprise en haut de la page. Ce problème ne se produit pas pour les sélections simples. Testé sous FF12, Chrome 18 et IE8.

@geoffweatherall Peut-être que le problème avec la colorbox est qu'elle est rendue sur la liste déroulante Chosen. Essayez quelque chose comme ceci pour voir si cela vous aide :

.chzn-drop {
    z-index: 999999 !important;
}

Ou essayez de régler l'opacité de la colorbox sur 0,1 pour vérifier si vous pouvez voir la liste déroulante sous la colorbox.

L'autre problème, avec les clés, je vais essayer de trouver une solution. Je n'ai pas utilisé la multi-sélection dans le projet sur lequel je travaille actuellement, donc j'ai failli ne pas la tester. Plus axé sur l'option de sélection unique.

D'accord, j'ai essayé ceci et j'ai vu les menus déroulants, mais la position est fausse. Ils descendent un peu sous la zone de texte. Voici un jing montrant le comportement. http://screencast.com/t/c4PCIHC176RX

Salut Gil,

J'ai essayé ta version et ça marche ! Merci beaucoup!
Il n'y a qu'une petite chose qui a cessé de fonctionner. C'est l'option disable_search_threshold. Le champ de recherche ne disparaîtra pas.

Avez-vous une idée?

Merci!

Peu importe! J'ai réussi à le réparer moi-même, cependant.. peut-être devriez-vous également modifier cela dans le code :

Changement:

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.container.addClass("chzn-container-single-nosearch");
    } else {
      this.container.removeClass("chzn-container-single-nosearch");
    }

À

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.dropdown.addClass("chzn-container-single-nosearch");
    } else {
      this.dropdown.removeClass("chzn-container-single-nosearch");
    }

Quel est le statut de cette fourche ? A-t-il été fusionné dans le maître ? Ou est-ce encore en test ?

Un autre problème .. le fork semble fonctionner pour moi, mais dans Firefox, je vois le div déroulant au bas de la page. Il semble que la position négative à gauche ne le déplace pas hors de la zone d'affichage. Peut-être est-ce dû à d'autres styles auxquels j'ai... pensé. Une idée? Pourquoi l'affichage n'est-il pas défini sur aucun ?

J'ai fait une pull request il y a longtemps pour mon correctif d'origine, mais c'était
jamais accepté (aucune idée pourquoi).

Il y a eu beaucoup d'ajustements supplémentaires suggérés dans ce fil
depuis, je n'ai encore joué avec aucun d'entre eux, et je n'ai pas vérifié
pour voir si quelqu'un a un fork qui les incorpore (s'il n'y en a pas
un, quelqu'un devrait en créer un, et s'il y en a, ce serait un bon
réponse à ta question.)

Le jeu. 7 juin 2012 à 06:44, Bob Archer
ré[email protected]
a écrit:

Un autre problème .. le fork semble fonctionner pour moi, mais dans Firefox, je vois le div déroulant au bas de la page. Il semble que la position négative à gauche ne le déplace pas hors de la zone d'affichage. Peut-être est-ce dû à d'autres styles auxquels j'ai... pensé. Une idée? Pourquoi l'affichage n'est-il pas défini sur aucun ?

---

Répondez directement à cet e-mail ou consultez-le sur GitHub :
https://github.com/harvesthq/chosen/issues/86#issuecomment-6162299

Je les ai tous essayés, et aucun d'entre eux n'a fonctionné pour moi, car j'ai plusieurs ensembles de champs cachés et un long formulaire qui défile. Donc, ma solution consistait à rendre la liste déroulante statique et masquée initialement, et affichée à l'ouverture, ce qui étire le conteneur parent. Cela fonctionne dans tous mes formulaires, même si c'est tout en bas de l'écran.

dans Chosen.prototype.results_show :

      this.dropdown.css({
        "top": dd_top + "px",
        "left": 0,
        "display": "block"
      });

Dans Chosen.prototype.results_hide :

      this.dropdown.css({
        "left": "-9000px",
        "display": "none"
      });

dans choisi.css :

.chzn-container .chzn-drop {
  position: static;
  display: none;
}

@gil , je veux juste vous remercier pour votre fork, j'étais sur le point d'abandonner l'utilisation de Chosen pour mon projet à cause de ce bug.

Honnêtement, je suis assez surpris que les gars de la récolte ne voient pas le défaut inhérent à la liaison d'un popup flottant à un conteneur contraint. Même indépendamment des règles de débordement, ce n'est tout simplement pas une bonne idée pour une bibliothèque publique qui n'a aucune idée de ce que les gens peuvent faire autour du widget.

Salut les gars! C'est bien de savoir que ma fourchette aide certaines personnes avec ce problème... :)

Je ne sais pas s'ils envisagent de modifier le code ou de fusionner avec certaines des solutions proposées ici. Nous ne savons pas si nous pouvons supposer que c'est la meilleure solution pour tous les cas. Continuons les tests et envoyons peut-être une pull request avec toutes les modifications.

@geoffweatherall J'ai corrigé le code avec quelque chose qui, je pense, vous aidera à résoudre le problème du clavier. Merci de me dire si ça marche ! ;)

@PilotBob Avez-vous toujours le problème de ce jing? A propos de l'autre problème, j'ai testé example.jquery.html sur Firefox 12 et ça semble bien. Vous pouvez peut-être essayer de remplacer tous les left:-9000px vous pouvez trouver par display:none . Je ne connais pas assez bien le code pour vous le dire, mais comme je mets display:block à results_show() , cela pourrait vous aider.

@pruimmartin Merci pour votre correction et désolé d'avoir pris trop de temps à répondre. J'ai déjà fusionné le correctif sur mon code !

gil - non, cela ne semble plus se produire, et je n'ai rien changé. Je suppose qu'il y a peut-être eu une erreur js ailleurs qui en était la cause. Cependant, j'ai d'autres problèmes avec choisi et j'ai envisagé de le remplacer par autre chose. Ceci est principalement dû au manque de mises à jour effectuées sur le maître.

@PilotBob J'envisage ce projet : https://github.com/ivaynberg/select2
Ils ont le même problème de débordement, mais je pense qu'ils prévoient de changer sur la version 3.

@gil - Votre solution fonctionne très bien, mais avec une largeur de li.search-field reste fixe à 25px . En d'autres termes, lorsque je charge votre page d'exemple, les menus sont magnifiquement ajoutés à l'élément body , mais le texte de l'espace réservé et toute saisie sont limités à 25px large. En fait, il semble que la méthode search_field_scale n'existe pas du tout. Est-ce que j'ai râté quelque chose?

@rreusser J'ai supprimé la méthode search_field_scale , car elle n'était utilisée que pour la sélection multiple et pour calculer correctement la position. Ce n'était plus nécessaire pour cette fourche. Quel navigateur/version/OS testez-vous ? Pour moi, la taille du champ de recherche est correcte à example.jquery.html .

@rreusser Hé, désolé. Maintenant je vois ce qui ne va pas. J'essaierai de le réparer plus tard dans la journée.

Pas de problème, @gil ! Merci pour la réponse rapide! Je dois faire plus d'expérimentations, mais il pourrait aussi être utile d'autoriser l'attachement à un élément arbitraire, ce qui devrait également être assez trivial, je pense. J'ai une zone de sélection à l'intérieur d'un div de défilement, et bien que votre solution empêche l'écrêtage, le menu ne bouge pas avec le div lors du défilement. Je pense que tout ce qui est nécessaire est un div supplémentaire quelque part, mais cela va demander du bricolage.

@rreusser J'ai

Et à propos de l'attachement à un élément différent, je pensais le rendre configurable. Mais vous pouvez résoudre votre problème de défilement avec un peu de config. Lorsque votre <select /> n'est pas un enfant direct de votre div de défilement, essayez ceci :

$(".your-select").chosen({
    overflow_container: $(".scrolling-div")
});

Mais si le nœud parent de votre <select /> était votre <div /> , cela ne devrait pas être nécessaire.

@gil , Ce fork sera-t-il fusionné avec master ? Ou est-ce encore en test ? J'ai également eu un problème avec les commandes du clavier dans le fork, la touche fléchée vers le bas ne déclenche pas les méthodes results_show ou results_toggle. Merci :-)

@myfriendtodd Je ne sais pas encore, peut-être que je pourrais envoyer une Pull Request quand tout le monde pense que c'est stable. Mais je pense toujours qu'il a besoin de plus de tests. Je vais essayer de résoudre les problèmes de clavier ce week-end. Merci!

@myfriendtodd Hé, je pense que je l'ai corrigé. Pourrais-tu le tester sur ton projet s'il te plait ? ;)

merci @gil vous fera savoir comment cela se passe. Merci pour votre aide :-)

@gil Merci beaucoup pour votre fourchette. Le correctif a fonctionné à merveille pour moi - génial!

Cependant, j'utilise Kickstrap pour styliser Chosen afin qu'il s'intègre dans Twitter Bootstrap. Il en résulte que Chosen avec ce correctif est très endommagé - le contenu de la liste déroulante apparaît en bas de la page, sans style - https://skitch.com/dyad/euys2/login . Pour autant que je sache, tout ce que Kickstrap fait est d'écraser les styles choisis par défaut.

Le fichier LESS pour les modifications apportées au style peut être trouvé sur https://github.com/ajkochanowicz/Kickstrap/blob/master/extras/chosen/chosen.less - y a-t-il quelque chose d'évident que votre correctif modifie qui explique pourquoi cela peut-être se passe-t-il ?

Merci beaucoup en effet.

Salut les gars,

Je travaille sur une nouvelle version avec une approche différente, au lieu d'ajouter la liste déroulante au corps. Cette version est beaucoup plus propre et réduira, espérons-le, de nombreux bugs, car le changement n'est pas si important. Pouvez-vous l'essayer pour voir si cela fonctionne? C'est sur une nouvelle branche :

https://github.com/gil/chosen/tree/new_version

@conatus Pouvez-vous également essayer avec cette version ? La dernière version sur la branche "master" avait de nombreux changements sur le fichier css, cette version ne change que 3 lignes. Modifiez-les sur le css choisi de Kickstrap :

• Ligne 4, passez de "position: relative;" à « position : statique ; ».
• La ligne 13 passe de « position : absolu ; » à « position : fixe ; ».
• Sur la ligne 128, insérez une nouvelle ligne " display: none; ", sous le " left: -9000px; "

J'espère que cela le fera fonctionner! ;)

De plus, cette nouvelle version est synchronisée avec la branche master de Harvesthq !

Désolé de ne pas avoir fait de suivi avant, mais nous sommes passés à une autre partie du projet et cela s'est estompé très rapidement ! Je vais tester ça et je vous tiens au courant dès que j'en ai l'occasion. Merci beaucoup pour vos efforts continus!

@gil - Je teste votre version et bien qu'elle fonctionne très bien, il y a un petit problème : lorsqu'il est choisi, il est placé dans un élément à position fixe, le défilement de la page déplacera la liste déroulante. C'est également un problème avec la saisie semi-automatique jQuery.

Je ne peux penser qu'à 2 solutions possibles à cela:
1) Si choisi est placé à l'intérieur d'un élément à position fixe, la liste déroulante doit être placée à l'intérieur du conteneur chzn et recevoir également une position fixe. La position supérieure doit être calculée par la position fixe du conteneur
2) Recalculer la position de la liste déroulante lors du défilement

La troisième option consiste à rendre la liste déroulante fixe chaque fois que la sélection se trouve dans un conteneur à position fixe.

@ragulka @ChiperSoft Je vois le problème... Juste pour être sûr, ce jsfiddle reproduit-il ce que vous dites ? http://jsfiddle.net/QY256/

Je vais essayer de faire quelque chose. Il existe une nouvelle option appelée overflow_container qui gère les problèmes de défilement, comme vous pouvez le voir lorsque vous faites défiler uniquement le div. Mais le problème ici est que lorsque vous faites défiler la fenêtre, elle sera mal positionnée.

Je pensais fermer Chosen, lorsque quelque chose défile, car la gestion du défilement cause d'autres problèmes mineurs (comme lorsque votre <select /> n'est qu'à moitié visible).

@ragulka @ChiperSoft Aussi, en tant que correctif temporaire, pouvez-vous essayer de changer la ligne 640, dans la méthode update_position , à partir de :

"top": (offset.top + dd_top) + "px",

à:

"top": (offset.top + dd_top - $(window).scrollTop()) + "px", ?

@gil Oui et non - le jsfiddle que vous avez fourni montre le problème, mais pour moi, il est apparu lorsque je faisais défiler le corps (mon élément fixe n'avait aucune barre de défilement). Dans Your jsfiddle, le problème semble apparaître lorsque je fais défiler le contenu de l'élément fixe, mais pas lorsque je fais défiler le corps.

@ragulka Je sais que ce n'est pas la meilleure solution, mais je pense l'avoir corrigé ici. Pouvez-vous l'essayer? Effectuez la modification à la ligne 640, comme je l'ai dit, et appliquez Chosen comme ceci :

$(".your-select").chosen({
    overflow_container: $(".your-fixed-div").add( document )
});

Cela devrait gérer le défilement sur le div et sur document , et corriger la position.

Mais comme je l'ai dit, je pense que je vais changer cela plus tard pour que Chosen se cache lorsque l'utilisateur fait défiler quelque chose.

Ce n'est peut-être pas un bogue choisi, mais je suis passé à select2 en remplacement de choisi et le problème a disparu sans qu'aucune solution de contournement ne soit nécessaire.

Merci beaucoup pour cela.

Dans l'intervalle, Kickstrap a été mis à jour - https://github.com/ajkochanowicz/Kickstrap/blob/beta/assets/Kickstrap/apps/chosen/chosen.css. Votre nouvelle branche fonctionne à merveille, mais les modifications que vous suggérez au CSS Kickstrap ne semblent pas avoir d'effet. Ce qui se passe, c'est que la liste déroulante elle-même n'apparaît plus. Des idées? Merci beaucoup.

Merci @gil !!! Votre branche (https://github.com/gil/chosen/tree/new_version) a résolu mon problème avec ce problème particulier.

Merci pour tous les conseils. J'ai apporté quelques légères modifications aux suggestions ci-dessus afin que les listes déroulantes fonctionnent avec les modaux Bootstrap v2.1.1 et Chosen v0.9.11. De petits changements ont été nécessaires pour que le .chzn-drop soit correctement positionné une fois qu'il a été rouvert après le défilement de la page.

Espérons que cela aide d'autres.

CSS

.modal .chzn-container .chzn-drop {
  position:fixed;
}

Javascript

Chosen.prototype.results_show = function() {

      var self = this;

      // hide .chzn-drop when the window resizes else it will stay fixed with previous top and left coordinates
      $(window).resize(function() {
        self.results_hide();
      });

      var dd_top;
      if (!this.is_multiple) {
        this.selected_item.addClass("chzn-single-with-drop");
        if (this.result_single_selected) {
          this.result_do_highlight(this.result_single_selected);
        }
      } else if (this.max_selected_options <= this.choices) {
        this.form_field_jq.trigger("liszt:maxselected", {
          chosen: this
        });
        return false;
      }
      dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
      this.form_field_jq.trigger("liszt:showing_dropdown", {
        chosen: this
      });

      if($('.modal.in').length) {
        // when in a modal get the scroll distance and apply to top of .chzn-drop
        var offset = this.container.offset();
        var scrolly = parseInt($(window).scrollTop(), 10);
        scrolly = scrolly < 0 ? 0 : scrolly;
        var toppy = offset.top+ dd_top - scrolly;
        this.dropdown.css({
          "top": toppy + "px",
          "left": offset.left + "px"
        });
      } else {
        // proceed as normal
        this.dropdown.css({
          "top": dd_top + "px",
          "left": 0
        });
      }

      this.results_showing = true;
      this.search_field.focus();
      this.search_field.val(this.search_field.val());
      return this.winnow_results();
    };

Je jouais donc un peu avec Chosen 0.9.11 et j'ai identifié les changements que je devais faire sur Chosen...

J'utilise Chosen dans une boîte de dialogue jQueryUI fortement modifiée qui est déplaçable et a une hauteur maximale avec débordement : faites défiler.

Pour que Chosen se comporte comme je le souhaite, j'ai changé ".chzn-container .chzn-drop" en " position:fixed " et ajouté " display: none ". Ensuite, dans "Chosen.prototype.results_hide", j'ai ajouté " display:none " à " this.dropdown.css "...

this.dropdown.css({
    "left": "-9000px",
    "display": "none"
});

Et dans "Chosen.prototype.results_show" j'ai remplacé le contenu de "this.dropdown.css" par " display:block ".
Pour obtenir la bonne position de la div .chzn-drop, j'ai ajouté la fonction de position jQueryUI.

this.dropdown.css({
    "display": "block"
}).position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

Dans "Chosen.prototype.search_field_scale" changer...

return this.dropdown.css({
    "top": dd_top + "px"
});

... à ...

return this.dropdown.position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

Maintenant il ne me reste plus qu'un problème :

J'ai besoin d'écouter les événements de glissement de la boîte de dialogue jQuery UI pour fermer la liste déroulante Chosen lorsque quelqu'un commence à déplacer la boîte de dialogue. J'ai déjà réalisé cela mais le code est assez sale :-)

Y a-t-il une chance que le correctif non trivial de cette branche https://github.com/gil/chosen/commits/new_version soit porté sur GWTChosen ?
GWTChosen est génial. Cependant, dans l'état actuel, il ne peut pas du tout être utilisé avec LayoutPanels.

Que diriez-vous d'ajouter une nouvelle fonctionnalité à la bibliothèque choisie où la liste serait rendue au - débordement d' encapsulation caché , et résoudrait probablement la plupart des problèmes rencontrés par les autres. PS: je ne considère pas cela comme un problème car overflow:hidden fait exactement ce qui est supposé faire. C'est plus sympa d'avoir une fonctionnalité. Merci.

+1 À la suggestion de Klikerko.

Tout comme @sillysachin j'utilise GWTChosen et j'ai le même problème avec LayoutPanels, overflow:hidden et ChosenListBox :/

Est-ce que quelqu'un connaît un correctif pour cela? @sillysachin avez-vous trouvé quelque chose depuis que vous avez posté ici ?

Tnx à l'avance :)

Nous l'avons en quelque sorte corrigé ad hoc en retirant le div déroulant du conteneur parent. Malheureusement, je suis submergé par le release crush et je vais prendre le temps de nettoyer le patch avant de le soumettre ici.

Ce commit dans https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983 le résout assez bien. C'est relativement à jour, mais je l'ai fait pour jQuery uniquement.

@robmcguinness J'ai dû le modifier pour fonctionner. Cependant, cela crée un bug. où vous ne pouvez pas Fermer la liste déroulante.

 Chosen.prototype.results_show = function() {

 this.dropdown.css({
      "display": 'block'
    });

  var dd_top;
  $(window).resize(function() {
    this.results_hide();
  });

  if (this.is_multiple && this.max_selected_options <= this.choices_count()) {
    this.form_field_jq.trigger("chosen:maxselected", {
      chosen: this
    });
    return false;
  }

  dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
  this.container.addClass("chosen-with-drop");
  this.form_field_jq.trigger("chosen:showing_dropdown", {
    chosen: this
  });

  if($('.modal.in').length) {
    // when in a modal get the scroll distance and apply to top of .chzn-drop
    var offset = this.container.offset();
    var scrolly = parseInt($(window).scrollTop(), 10);
    scrolly = scrolly < 0 ? 0 : scrolly;
    var toppy = offset.top+ dd_top - scrolly;
    this.dropdown.css({"top": toppy + "px","left": offset.left + "px"});
  } else {
    // proceed as normal
    this.dropdown.css({
      "top": dd_top + "px",
      "left": 0
    });
  }




  this.results_showing = true;
  this.search_field.focus();
  this.search_field.val(this.search_field.val());
  return this.winnow_results();
};


Chosen.prototype.results_hide = function() {
  if (this.results_showing) {

    this.dropdown.css({
      "display": 'none'
    });

    this.result_clear_highlight();
    this.container.removeClass("chosen-with-drop");
    this.form_field_jq.trigger("chosen:hiding_dropdown", {
      chosen: this
    });
  }
  return this.results_showing = false;
};

et j'ai dû ajouter une largeur au CSS, sinon cela irait à 100% de la largeur du site.

.modal .chosen-container .chosen-drop {
position:fixe;
largeur : 300px ;
}

J'ai pu résoudre les problèmes avec le code ci-dessus. Compatible avec la version 1. Cependant, le mien est plus une plate-forme pour que cela fonctionne. mais pour l'instant ça marche bien. Le dernier problème que je vois est le redimensionnement du navigateur, le mod actuel ne fonctionne pas.

Quelqu'un sait si l'une des solutions possibles à ce problème va bientôt être fusionnée dans la branche master ? C'est un deal-breaker pour moi =/.

Nous sommes passés à l'utilisation de Select2... il a aussi plus de fonctionnalités.

Le jeu. 19 déc. 2013 à 11:24, Daniel Hoffmann Bernardes <
[email protected]> a écrit :

Quelqu'un sait si l'une des solutions possibles à ce problème va être
bientôt fusionné dans la branche master ? C'est un deal-breaker pour moi =/.

-
Répondez directement à cet e-mail ou consultez-le sur Gi tHubhttps://github.com/harvesthq/chosen/issues/86#issuecomment -30942420
.

Merci PilotBob, est choisi n'est plus maintenu? Si c'est le cas, vous voudrez peut-être mettre à jour la documentation.

Ce n'est pas mon projet. J'en "étais" un utilisateur. En raison de plusieurs problèmes, nous avons trouvé
une alternative.

Le jeu. 19 déc. 2013 à 11:53, Daniel Hoffmann Bernardes <
[email protected]> a écrit :

Merci PilotBob, est choisi n'est plus maintenu? Si c'est le cas, vous voudrez peut-être
pour mettre à jour la documentation.

-
Répondez directement à cet e-mail ou consultez-le sur Gi tHubhttps://github.com/harvesthq/chosen/issues/86#issuecomment -30945150
.

@DanielHoffmann Chosen est toujours activement maintenu. Select2 était à l'origine un fork de Chosen, mais s'est depuis suffisamment éloigné pour que ce soit sa propre chose.

Chosen est intentionnellement simple - il était destiné à remplacer les select s, ce qui évite de nombreuses fonctionnalités et configurations compliquées. Select2 a pris la route opposée et a ajouté de nombreuses fonctionnalités et configurations - c'est à vous de décider laquelle de ces philosophies vous appréciez le plus.

Quant à ce problème _spécifique_, il ne s'agit malheureusement que de cela : un problème, pas un correctif. Si quelqu'un soumet une pull request pour le corriger, sa fusion sera envisagée. Cependant, OSS n'est le travail principal d'aucun des mainteneurs - ils y travaillent quand ils le peuvent autour de leur travail à temps plein. Donc, comme toujours, "pull requests acceptées" si vous voulez essayer de le réparer vous-même !

quand ce problème sera-t-il résolu ? c'est tellement vieux mais essentiel à beaucoup de projets ! veuillez y remédier au plus vite !

Merci!

il y a beaucoup de correctifs dans les fourches de choisi alors pourquoi ne pas utiliser l'un de ces correctifs ?

@domnulnopcea Il n'y a jamais eu de PR soumettant un correctif pour cela, seulement des rapports en double. Si vous avez une idée pour le réparer, veuillez envoyer un PR. Nous l'examinerons ensuite. Actuellement, je ne suis au courant d'aucun fork résolvant ce problème particulier

J'ai un correctif pour cela, ce n'est pas un fork propre, c'est enterré dans un autre référentiel et c'est uniquement sur la version jQuery. (Non je ne suis pas fier de moi)

Cela fonctionne en ajoutant l'élément déroulant à l'élément body et en définissant sa position absolument lorsque la page défile ou redimensionne. Cela fonctionne également si la liste déroulante doit être au-dessus ou en dessous du champ et quelle doit être sa hauteur (donc elle n'est pas coupée par la page).

S'il s'agit de quelque chose dans lequel vous souhaitez fusionner (et il n'y a en effet pas d'autres forks), je vais essayer de trouver du temps pour le dépoussiérer et créer une demande de tirage.

https://gist.github.com/msaspence/11032254

@stof et https://github.com/tompaton/chosen ?

commit : https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983

@domnulnopcea cela n'a jamais été soumis pour inclusion dans Chosen lui-même AFAIK. Nous ne pouvons pas du tout chercher des fourches pour examiner tous les travaux effectués dessus. Nous travaillons sur Chosen pendant notre temps libre, nous ne pouvons donc pas consacrer des semaines à examiner des milliers de commits dans de nombreux dépôts pour voir ce qu'ils font

@stof nous apprécions beaucoup votre travail. Je l'utilise sur mon propre projet (www.ubirimi.com) Mais maintenant que je vous ai donné un lien vers un commit, auriez-vous la gentillesse d'examiner ces changements et de les appliquer au dépôt officiel choisi ?

Merci beaucoup

Etant donné qu'il ne peut pas être appliqué directement (le code a beaucoup changé depuis 11 mois), il faudra un certain temps (et il faudra aussi le tester pour être sûr qu'il fonctionne correctement). Donc je ne peux pas le faire maintenant

@stof merci d'avoir pensé à le faire ! Je vous en suis reconnaissant!

@domnulnopcea si revoir les modifications et créer vous-même une pull request. C'est la beauté de l'open source après tout

@msaspence Je le ferais mais je ne suis pas un développeur frontend ! Je ne suis pas très habitué à JS et à tous ces trucs côté client

Nous sommes passés à Select2 car il permet la récupération de données AJAX. Vous voudrez peut-être le regarder.

Je pense que tout le monde est passé à Select2 à ce stade - y a-t-il un avantage à utiliser Chosen ?

Pour moi a parfaitement fonctionné la solution PilotBob !

J'ai ajouté ceci sur mon code :

$(document).ready(function () {
$(".chzn-select").on(" liszt:showing_dropdown ", function () {
$(this).parents("div").css("overflow", "visible");
});
}

Merci beaucoup!!!

Le problème est que la position de la liste d'options est absolute , cela ne développe pas le conteneur parent. Une solution que je propose est de le changer en float: left | right car il peut développer le parent, si après j'ajoute un objet DOM avec clear:both

J'ai résolu ce problème (utilisé avec la boîte de dialogue jquery-ui) avec ce qui suit dans mon css :

#clone-budget-dialog {overflow: visible;}

@grduggan peux-tu proposer une solution dans le css de la bibliothèque ?
Je pense que ta solution est valable. Faites une push-requête !
+1

Jamais fait ça avant. Je vais devoir enquêter. Ce serait bien d'avoir dans le css.

Je vois un problème similaire lorsque la zone de sélection est proche de la fin de la page. La boîte de sélection native résout ce problème en s'ouvrant au lieu de tomber. Pourquoi pas?

débordement : visible ; sur le div du conteneur a fonctionné pour moi ! Merci.

vous n'avez pas toujours besoin du débordement:hidden lorsque vous utilisez des flotteurs, vous pouvez également effacer les flotteurs en utilisant ceci dans votre parent (supprimez le débordement:hidden):

&:avant,
&:après {
contenu: " "; // 1
affichage : tableau ; // 2
}
&:après {
clarifier les deux;
}

c'est ainsi que fonctionne la classe clearfix dans bootstrap

J'ai modifié le css (voir ci-dessous). Semblait fonctionner pour mon scénario.

.chosen-container .chosen-drop {
position : relative ; /_Changé d'absolu pour éviter la coupure de débordement dans le conteneur_/
Top 100%;
à gauche : -9999px ;
indice z : 1010 ;
largeur : 100 % ;
bordure : 1px solide #aaa ;
bordure supérieure : 0 ;
arrière-plan : #fff ;
box-shadow : 0px 4px 5px rgba(0,0,0,0.15);
}

.chosen-container .chosen-results {
couleur : 444 ;
position : relative ;
débordement-x : caché ;
overflow-y : auto ;
marge : 0 4px 4px 0 ;
remplissage : 0 0 0 4px ;
hauteur maximale : 200 px ; /_Changé de 240px_/
-webkit-overflow-scrolling : toucher ;

/*Added to clearfix because we changed the chosen-drop to a relative position*/
&:before,
&:after {
    content: " "; // 1
    display: table; // 2
}
&:after {
    clear: both;
}

}

Envelopper le select (et Chosen) dans un élément fieldset peut également produire des effets indésirables dans les navigateurs webkit (c'est-à-dire couper quand un parent a overflow: hidden ).
C'est parce que webkit ajoute min-width: -webkit-min-content; aux ensembles de champs par défaut.

Cela a résolu le problème pour moi:

fieldset { min-width: 0; }

@chassq hmm votre solution ne fonctionne pas pour moi, .. voir cette capture d'écran :

J'ai un div autour des sélections choisies avec

  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;

Merci à tous ceux qui ont déjà donné la solution avec position: fixed

Voici un jsfiddle avec la solution (écrase les classes CSS choisies):
http://jsfiddle.net/jwbL8utx/1/ ;)

J'ai encore 1 problème, lors du défilement vers le bas (en utilisant max-height) le choisi a un décalage, comme vous pouvez le voir ici lors du défilement vers le bas et de l'ouverture du deuxième choisi:

http://jsfiddle.net/jwbL8utx/2/

Voici comment je l'ai résolu :

http://jsfiddle.net/0w4a4dq5/1/

Ce correctif ne vous oblige pas à modifier d'autres éléments que le menu choisi lui-même. Vous remarquerez qu'il masque à nouveau le menu si vous le "déplacez", mais cela correspond à mes besoins. Si vous voulez le garder au top tout le temps, vous pouvez lier un événement de défilement à votre conteneur div et déclencher l'événement ' selected:close.chosen '.

@typologist Merci pour votre excellente solution.
Il y a deux bugs mineurs dans votre JS que je voudrais mentionner cependant :
À la ligne 51, il devrait être

'top': y - $(document).scrollTop()

sinon le popup peut être déplacé sous certaines conditions

A la ligne 23, au lieu d'utiliser

$('.chosen-container')

pour lier les événements, je pense qu'il serait préférable d'utiliser

$chosenSelect.next('.chosen-container')

afin d'éviter plusieurs liaisons si la fonction est appelée plus d'une fois avec différents widgets choisis() à corriger.

s'il vous plaît dites-moi y a-t-il une solution pour Chosen v1.4.2?

.chosen-container.chosen-with-drop .chosen-drop {
    position: relative;
}

overflow-y: visible

Ajoutez ceci au div parent qui contient la mise en page. Dans mon cas, il s'agissait d'un sous-div de dialogue modal qui avait _overflow-y: auto_ et le remplaçait par _overflow-y: visible_ fonctionnait pour moi.

Existe-t-il encore une solution à ce problème ?

Ce projet a votre réponse :
http://jsbin.com/finufihaji/edit?html

Chercher un peu et faire des tests est la solution la plus basique.

J'ai dû remplacer les résultats .chosen-drop et .chosen-results et définir une hauteur fixe pour les deux afin que toutes les options soient sélectionnables et ne soient pas affectées par la directive parent div overflow

Au moins, cela fonctionne pour moi et la plupart des domaines que j'ai choisis n'ont que 3 ou 4 options. Seul 1 (celui qui est caché) en a environ 12 et peut grandir dans un avenir proche.

J'ai appliqué ce qui suit au div parent qui avait le débordement : caché

.profile-content { /* Hack to stop profile-content from cropping Chosen dropdown */ padding-bottom: 100px; margin-bottom: -100px; }

Source : débordement de pile

@doowruc Super hack !

Existe-t-il une méthode pour attacher la liste déroulante choisie à une cible spécifique, afin que nous puissions l'attacher au corps du document au lieu d'une boîte de dialogue ? cette voie choisie sort du dialogue et n'est pas contenue par celui-ci ?

.ui-dialog-content{
    overflow:visible !important;
 }

A travaillé pour moi.

Je sais que j'avais encore du mal avec ça. Voici un violon qui montre une option pour déplacer l'élément dans le corps et définir le positionnement absolu de manière fiable, même avec le défilement.

https://jsfiddle.net/phil_ayres/gvn8bkaL/

https://github.com/R1p8p8e8r/chosen
je pense que ma solution va t'aider