Chosen: Chosen wird "ausgeschnitten", wenn es in einem Bereich mit "overflow:hidden" platziert wird.

Dies ist das gleiche wie bei Ausgabe #59

Ist dies nicht unvermeidlich, da das Container-Element, na ja, "overflow :hidden" ist, so funktioniert CSS. Der einzige Weg, dies zu umgehen, besteht darin, das Drop-Down außerhalb des Containers zu rendern und dann die absolute Positionierung zu verwenden.

Ja, ich stimme dfischer zu. Scheint kein Chosen-Problem zu sein. Per Definition gibt die Überlaufeigenschaft an, was passiert, wenn der Inhalt die Grenzen eines Elements überschreitet. Wenn Sie nicht möchten, dass der _overflow_ ausgeblendet wird, ändern Sie diese Eigenschaft.

Obwohl dies wahr ist, denke ich, dass dies ein häufiger Anwendungsfall bei Dialogfeldern ist. (Besonders jquery-Dialog)

Es ist ein häufiger Anwendungsfall, jedoch basierend auf diesem Ticket, wie ich bereits erwähnt habe ... die gesamte Struktur und Implementierung müssen sich ändern, wenn Sie dies erreichen möchten.

Sie sind _erforderlich_, außerhalb des Containers zu rendern, damit dies geschieht, und verwenden Sie dann jQuery/JS-Magie, um die Positionierung relativ zum Trigger herauszufinden.

Die Groß-/Kleinschreibung von jQuery Dialog hängt nicht von einem Containerelement ab, daher verwendet es nur die Positionierung basierend auf den mittleren Abmessungen und der Breite des Dialogfelds.

Dies ist eher ein CSS-Problem, kein Chosen-Problem. Überlauf nicht setzen: auf dem Container versteckt. Sie müssen eine andere Technik verwenden, um die Schwimmer darunter zu löschen, wenn Sie dies tun.

Ich habe gerade einen Code geschrieben, der meiner Meinung nach das tut, wonach Sie suchen:

$.fn.extend({
gewählt: Funktion (Daten, Optionen) {
if ($(this).parent().css("overflow") == "versteckt") {
// Holen Sie sich die Offsets zwischen Elternteil und Kind, um das Diff zu berechnen
//wenn wir zum absoluten drängen
var y = $(this).offset().top - $(this).parent().offset().top,
x = $(this).offset().left - $(this).parent().offset().left,
$t1 = $("<div/>", {
css: {
"position": "relativ",
"höhe": $(this).parent().height,
"width": $(this).parent().width
}
}),
$t2 = $("<div/>", {
css: {
"position": "absolut",
"oben": j,
"links": 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")) {
Rückgabe neuer Ausgewählter (diese, Daten, Optionen);
}
});
}
});

(Übrigens bin ich ab heute neu bei github, also wenn es einen anderen Ort gibt, an dem ich Code posten sollte, lass es mich wissen)

Dieser Code bewirkt effektiv Folgendes:

1. Berechnen Sie den Versatz zwischen dem Auswahlfeld und dem übergeordneten Element.
2. Erstellen Sie ein übergeordnetes Div mit den gleichen Abmessungen wie Ihr Überlauf ausgeblendet und auf relativ gesetzt.
3. Erstellen Sie ein übergeordnetes Element für das Auswahlfeld, indem Sie das Element als absolutes Element erstellen, indem Sie die x- und y-Versätze aus Schritt 1 verwenden.
4. füge neues Elternteil vor dem Elternteil des Selects ein, füge das Überlauf-Div in das neue Elternteil ein, füge das neue Elternteil in das Master-Elternteil ein, füge das Select an das neue Kind-Elternteil an.

Interessante Idee, Matthew, aber ich denke, das wird in einem jQuery-UI-Dialog nicht funktionieren, oder?

Es ist wahrscheinlicher, dass das Dropdown-Element (.chzn-drop) aus dem .chzn-Container und bis zum Dokumentkörper gezogen werden muss...

Fügen Sie der Seite einfach einen Stil hinzu und Ihre Antwort ist ja:

.ui-dialog{ overflow:sichtbar; }

Funktioniert bei mir nicht, da ich meine Seiten mit divs als Spalten erstelle (im Gegensatz zu tds und Tabellen).
Ich verwende " overflow:hidden ", um zu verhindern, dass außer Kontrolle geratene Inhalte benachbarte Divs ruinieren.

Ich nehme an, viele von Ihnen verwenden die gleiche Struktur.

Das wird nicht funktionieren, da die Dialoge auf overflow:auto gesetzt sind, damit sie es können
haben Scrollbars, wenn nötig.

Am Freitag, 29. Juli 2011 um 23:47 Uhr, ethaniel
[email protected]
schrieb:

Funktioniert bei mir nicht, da ich meine Seiten mit divs als Spalten erstelle (im Gegensatz zu tds und Tabellen).
Ich verwende " overflow:hidden ", um zu verhindern, dass außer Kontrolle geratene Inhalte benachbarte Divs ruinieren.

Ich nehme an, viele von Ihnen verwenden die gleiche Struktur.

Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an:
https://github.com/harvesthq/chosen/issues/86#issuecomment -1681303

Bevor wir weiter in dieses Gespräch einsteigen, habe ich eine theoretische Lösung vorgenommen. Es kann nicht auf alle Szenarien angewendet werden, weil es nur ein Element mit einem Gegenattribut braucht, um es zu vermasseln. Die obige Lösung mit sichtbarem Überlauf funktioniert nur mit der Dialogoption resizable:false. Warum benötigen Sie einen Auswahlüberlauf außerhalb eines Dialogfelds?

Ok, hier sind ein paar Screenshots, die das Problem hoffentlich verdeutlichen.

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

Screenshots 1 & 2 zeigen, wie es sich verhält, es ist nicht genug Platz für
das Dropdown-Menü "innerhalb" des Dialogs, sodass es scrollt und als a . ausgeblendet wird
Ergebnis. Das ist sehr umständlich zu bedienen und hässlich und nicht wie das eingebaute
Ausgewählte Steuerelemente funktionieren (sie werden über dem Inhalt angezeigt, egal
wie tief sie drin sind oder was der Überlaufstil ist.)

Screenshots 3 & 4 zeigen meinen aktuellen Workaround, der ein Ganzes darstellen soll
Platz unter der Dropdown-Liste. Das ist auch hässlich und macht die Form
schwerer zu bedienen.

Zusammenfassend lässt sich sagen, dass die nativen Auswahlsteuerelemente dies nicht sind
beschränkt auf ihren übergeordneten Container und wenn möglich auf die ausgewählten
Die erweiterte Auswahlsteuerung sollte es auch nicht sein, da sie so konzipiert ist, dass sie
ein Drop-In-Ersatz für die native Steuerung.

Dies ist theoretisch möglich, würde jedoch durch das gewählte Plugin ein völlig anderes Konstruktions- / Positionierungssystem erfordern. Diese Änderung wäre umfangreich und würde ein Umschreiben des aktuellen Plugins von etwa 30 % erfordern. Ich betrachte dies als Feature Request und nicht als Bug. Alle Browser haben ein Standardrendering für ausgewählte Elemente. Chosen repliziert es mit divs, wird aber nicht wie ein ausgewähltes Element behandelt.

Wie gesagt, die einzige Möglichkeit, dies zu tun, ist die absolute Positionierung AUSSERHALB des ausgelösten Elements. Es gibt keinen anderen Weg. Richtig auf @medelbrock

Obwohl es sehr schön wäre, sich wie ein Browser-Widget zu verhalten, stimme ich zu, dass dies als Funktion und nicht als Fehler betrachtet werden sollte. Können wir derzeit eine maximale Höhe festlegen?

@veloper : Ich habe das div.chzn-drop immer noch im Dialog enthalten ist und daher abgeschnitten wird, unabhängig davon, ob es absolut positioniert ist oder nicht.

Der einzige Weg, dies zu verhindern, besteht darin, das div.chzn-drop aus dem Dialog herauszuziehen und es zu einem Kind von <body> , aber wie alle betonen, ist das eine größere Veränderung als jeder andere ist bereit, sich beim Versuch die Hände schmutzig zu machen.

Leider ist die Verwendung von overflow:visible keine Option, der Dialog muss bei Bedarf scrollbar sein.

Ich glaube, ich habe das Problem gelöst, indem ich die Dropdown-Position auf absolut gesetzt habe und immer dann, wenn die Dropdown-Einstellung ihre Position anzeigt.
zB Ändern (Bearbeiten des Javascript)

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

zu

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

Ich stoße selbst auf dieses Problem, während ich versuche, Chosen in einem Wijmo / jQuery-UI-Dialog zum Laufen zu bringen. Ich bin hier vielleicht weit außerhalb meiner Liga, aber gibt es nicht eine ziemlich einfache Lösung, um den "Dropdown" -Teil so zu gestalten, dass er "display: none" hat, während er ausgeblendet ist, und dann "display: block", wenn er angezeigt wird? Die Bildlaufleisten würden immer noch auftreten, wenn das Dropdown-Menü geöffnet ist, aber das ist wahrscheinlich besser, als die Bildlaufleisten immer vorhanden zu haben.

Der Fix (getestet in Chrome 13, Firefox 7 und IE 9):

In selected.css:

.chzn-Container .chzn-drop {
Position: fest;
}

und in Chosen.prototype.results_show

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

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

Das ist das Zeug, gutes Denken @levushka. Jetzt in meiner Filiale gelöst: https://github.com/tompaton/chosen/commit/fda07051161f3fffe6049362b6c9b66ffbe857d1

Okay, es ist etwas komplizierter. Der obige Fix funktionierte nicht, wenn die Seite gescrollt wurde.

Ich habe mein Repo mit einem Changeset aktualisiert, das es irgendwie behebt, das Dropdown ist jetzt richtig positioniert, aber wenn die Seite gescrollt wird, während das Dropdown sichtbar ist, bewegt es sich nicht wie erwartet. Das ist ärgerlich, aber kein Showstopper.

iOS 5 _könnte_ dieses Problem lösen, aber iOS unterstützt derzeit nicht Position: auf die gleiche Weise wie Desktop-Browser behoben. Chosen funktioniert hervorragend auf dem Desktop, aber dies könnte die Verwendung auf schlecht gestalteten mobilen Browsern einschränken ...

Ich hacke hier nicht nur auf Apple herum, älteren Versionen von Android fehlt auch die Unterstützung für Position: behoben.

Ab jQuery 1.7 (noch nicht veröffentlicht, aber im Release Candidate) haben sie einen integrierten Test für die Unterstützung von CSS Position Fixed:
http://bugs.jquery.com/ticket/6809

Es könnte sich lohnen, jQuery 1.7 zu erkennen und ihr Ergebnis zu verwenden oder ihren Code zu kopieren und ansonsten ein separates Ergebnis zu erhalten.

+1 für Position am Ende des Körperelements.

Überprüfen Sie das jquery-Widget "Autocomplete". ziemlich gute Lösung für dieses Problem:

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

tolles Plugin übrigens.

Ich hatte dieses Problem hauptsächlich in Webkit-Browsern. IE geht nur mit Auserwählten mental, also habe ich es deaktiviert, wenn zB. Mit jquery überprüfe ich, ob der Browser ein Webkit-Browser ist, und passe den Überlauf des Divs mit meinen Auserwählten wie folgt an:

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

wobei dies das div ist, das die Auserwählten enthält.

+1 @levushka und @tompaton Nicht perfekt, aber gut genug. Kaum :)

@levushka- Lösung ist großartig, aber sie ist global ... wenn Sie also bei window.top nach unten scrollen und auf die Auswahl klicken, wird sie an der falschen Position heruntergerollt. Also hier ist die Lösung für normale Seiten und Popup-Fenster

in Chosen.prototype.results_show

ersetzen:

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

mit:

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

Wenn Sie jQuery UI oder etwas anderes verwenden, können Sie Probleme mit dem Z-Index haben, also setzen Sie den ausgewählten Z-Index auf höhere Werte (jQuery UI ist 1010+).

Jetzt funktioniert es in FF und für Chrome benötigen Sie:

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

Liebhaberelemente können ohne Probleme overlow:hidden haben.

Warum nicht die Dropdown-Liste im Hauptteil rendern und die Positionsfunktion von Jquery UI verwenden, um die Box zu positionieren? http://jqueryui.com/demos/position/. Dies ist die Standardmethode, die für viele jquery-UI-Widgets verwendet wird.

$( ".czn-drop" ).position({
von: $( "#container" ),
mein: "links oben",
bei: "links unten",
});

Verzeihen Sie, dass ich mich reingemeldet habe, ich hatte das gleiche Problem mit der Anzeige der ausgewählten Dropdown-Liste in einem jQueryUI-Dialogfeld.
Ich habe die üblichen Sachen mit Überlauf versucht, aber das hat meine anderen Dialoge durcheinander gebracht.

Stattdessen habe ich meinen Dialog auf eine feste Höhe gesetzt und auch das gewählte Drop-Down auf eine feste Höhe gesetzt.
Es wäre schön, dies über die Optionen von selected anstelle von CSS zu tun.

.chzn-drop {
Überlauf: automatisch;
maximale Höhe: 75px;
}

Vielleicht hilft das jemand anderem.

Entschuldigung für eine ziemlich n00bish/RTFM-Frage, aber wie kann ich die Dropdown-Liste außerhalb des Containers rendern (z. B. auf body )? Im Moment fällt mir nur ein, das Plugin zu forken und dieses Stück Code hineinzuschieben. Es muss einen eleganteren Weg geben, dies zu erreichen.

Gibt es ein Ereignis das gewählte ausgelöst wird wenn das Dropdown geöffnet/geschlossen ist. Wenn ja, kann ich einfach die Überlaufeinstellung der Eltern-Divs auf sichtbar und dann zurück ändern. Ich habe das versucht mit:

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

Und ja, es hat funktioniert. Aber als ich dann hinzugefügt habe:

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

Es hat nicht mehr funktioniert. Ich nehme an, weil ich mehrere ausgewählte Steuerelemente im Formular habe. Wenn ich diesen Code in ein Open/Close-Ereignis einfügen könnte, dann denke ich, dass es mich dorthin bringen würde, wo ich hin möchte.

Sie können sich die liszt:showing_dropdown und liszt:hiding_dropdown anhören, die auf dem ursprünglichen Select-Element gesendet wurden

Ausgezeichnet ... also das hat mein Problem gelöst:

$(".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", "");
});

Natürlich funktioniert es möglicherweise nicht mit allen Layouts.

Danke... Bob

Ich habe den Code gegabelt, um das Dropdown-Menü von <body/> untergeordnet zu machen. Ich habe es noch nicht genug getestet, aber hier funktioniert es perfekt -> https://github.com/gil/chosen

Können Sie sehen, ob es Ihr Problem löst, @tompaton? Ich glaube, ich muss jetzt nur noch das Scrollen erkennen, um die Position manuell zu korrigieren.

Die Gabel hat das Anzeigeproblem für mich behoben und funktionierte am unteren Rand der Seite gut, wo sie die angezeigte Höhe auf ein vernünftiges Maß beschränkte. Die Gabel hat jedoch die Multi-Select-Funktionalität gestoppt.

@geoffweatherall Wirklich? Schön! :D Über das Problem mit der Mehrfachauswahl, was funktioniert nicht mehr? Könnten Sie bitte die Datei example.jquery.html ausprobieren und mir sagen, ob sie nicht funktioniert? Für mich scheint es in Ordnung zu sein.

Ja, Beispiele funktionieren gut (FF 12).

Das Single-Select-Beispiel befindet sich in einer ziemlich einfachen HTML-Seite mit "Panels", die Overflow versteckt verwenden. Das Multi-Select-Beispiel befindet sich jedoch in einem "Dialog", der mit Colorbox erstellt wurde (http://www.jacklmoore.com/colorbox) - fragen Sie mich nicht warum, das Projekt war so, als ich ankam. Ich vermute, dass es damit zu tun haben könnte, ich werde es mir anschauen.

Der Fork behebt das Cut-Off-Problem an einer Reihe von Stellen in unserer Anwendung, einschließlich Mehrfachauswahlen, die nicht in Colorboxen verschachtelt sind (http://www.jacklmoore.com/colorbox). Ich glaube, das Problem mit Colorbox ist kein Fehler der gewählten. Tolle Gabel :-)

Tatsächlich habe ich ein Problem mit dem Fork gefunden, das auf der Beispielseite (example.jquery.html) angezeigt wird. Wenn Sie beim Mehrfachauswahl-Steuerelement auf das Steuerelement klicken, um die Liste der Optionen zu öffnen, und dann die Pfeiltasten nach oben und nach unten verwenden, um in der Liste zu navigieren, wird die Liste der Optionen überraschend an den Seitenanfang verschoben. Dieses Problem tritt bei Single Selects nicht auf. Getestet in FF12, Chrome 18 und IE8.

@geoffweatherall Vielleicht besteht das Problem mit der Farbbox darin, dass sie über das Dropdown-Menü "Ausgewählt" gerendert wird. Versuchen Sie so etwas, um zu sehen, ob es hilft:

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

Oder versuchen Sie, die Deckkraft der Farbbox auf 0,1 zu setzen, um zu überprüfen, ob Sie das Dropdown-Menü unter der Farbbox sehen können.

Das andere Problem, mit den Schlüsseln, werde ich versuchen, eine Lösung zu finden. Ich habe die Mehrfachauswahl in dem Projekt, an dem ich gerade arbeite, nicht verwendet, also habe ich es fast nicht getestet. Konzentriert sich mehr auf die Single-Selection-Option.

Ok, ich habe dies versucht und die Dropdowns sichtbar gemacht, aber die Position ist falsch. Sie fallen ziemlich weit unter das Textfeld. Hier ist ein Jing, das das Verhalten zeigt. http://screencast.com/t/c4PCIHC176RX

Hallo Gil,

Ich habe deine Version ausprobiert und sie funktioniert! Vielen Dank!
Es gibt nur eine kleine Sache, die nicht mehr funktioniert. Es ist die Option disable_search_threshold. Das Suchfeld verschwindet nicht.

Hast du eine Idee?

Vielen Dank!

Egal! Ich habe es jedoch selbst behoben.. Vielleicht sollten Sie das auch im Code ändern:

Veränderung:

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

Zu

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

Wie ist der Status dieser Gabel? Wurde es in Master zusammengeführt? Oder ist es noch im Test?

Ein anderes Problem .. die Gabel scheint für mich zu funktionieren, aber in Firefox sehe ich das Dropdown-Div am Ende der Seite. Es scheint, dass die negative linke Position es nicht aus dem Anzeigebereich verschiebt. Vielleicht liegt es an einigen anderen Stilen, die ich... dachte. Irgendeine Idee? Warum wird die Anzeige nicht auf "Keine" eingestellt?

Ich habe vor langer Zeit eine Pull-Anfrage für meinen ursprünglichen Fix gestellt, aber das war es
nie akzeptiert (keine Ahnung warum).

In diesem Thread wurden viele zusätzliche Optimierungen vorgeschlagen
seitdem habe ich noch mit keinem davon gespielt und auch nicht nachgeschaut
um zu sehen, ob jemand eine Gabel hat, die sie enthält (wenn nicht)
einen, sollte jemand einen erstellen, und wenn ja, wäre das gut
Antwort auf deine Frage.)

Am Do, 7. Juni 2012 um 6:44 Uhr, Bob Archer
[email protected]
schrieb:

Ein anderes Problem .. die Gabel scheint für mich zu funktionieren, aber in Firefox sehe ich das Dropdown-Div am Ende der Seite. Es scheint, dass die negative linke Position es nicht aus dem Anzeigebereich verschiebt. Vielleicht liegt es an einigen anderen Stilen, die ich... dachte. Irgendeine Idee? Warum wird die Anzeige nicht auf "Keine" eingestellt?

---

Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf GitHub an:
https://github.com/harvesthq/chosen/issues/86#issuecomment -6162299

Ich habe sie alle ausprobiert, und keiner von ihnen hat bei mir funktioniert, weil ich mehrere Fieldsets habe, die versteckt sind, und ein langes Formular, das scrollt. Meine Lösung bestand also darin, das Dropdown-Menü zunächst statisch und ausgeblendet zu machen und beim Öffnen anzuzeigen, wodurch der übergeordnete Container gestreckt wird. Dies funktioniert in allen meinen Formularen, auch wenn es sich ganz unten auf dem Bildschirm befindet.

in Chosen.prototype.results_show:

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

In Chosen.prototype.results_hide:

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

in gewählter.css:

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

@gil , ich möchte mich nur für deinen Fork

Ich bin ehrlich gesagt ziemlich überrascht, dass die Erntehelfer den Fehler nicht sehen, der darin besteht, ein schwimmendes Popup an einen eingeschränkten Container zu binden. Auch unabhängig von Überlaufregeln ist dies keine gute Idee für eine öffentliche Bibliothek, die keine Ahnung hat, was die Leute um das Widget herum tun.

Hallo Leute! Es ist schön zu wissen, dass meine Gabel einigen Leuten bei diesem Problem hilft... :)

Ich weiß nicht, ob sie planen, den Code zu ändern oder mit einigen der hier vorgeschlagenen Lösungen zusammenzuführen. Wir wissen nicht, ob wir davon ausgehen können, dass dies für alle Fälle die beste Lösung ist. Lassen Sie uns weiter testen und vielleicht einen Pull-Request mit allen Änderungen senden.

@geoffweatherall Ich habe den Code mit etwas

@PilotBob Hast du immer noch das Problem von diesem Jing? Was das andere Problem betrifft, habe ich example.jquery.html auf Firefox 12 getestet und es scheint in Ordnung zu sein. Vielleicht können Sie versuchen, alle left:-9000px Sie finden können, durch display:none zu ersetzen. Ich kenne den Code nicht gut genug, um es Ihnen zu sagen, aber da ich display:block auf results_show() , könnte es Ihnen helfen.

@pruimmartin Vielen Dank für Ihre Korrektur und Entschuldigung, dass die Antwort zu lange

gil - nein, es scheint nicht mehr zu passieren, und ich habe nichts geändert. Ich gehe davon aus, dass an anderer Stelle ein js-Fehler aufgetreten ist, der ihn verursacht hat. Ich habe jedoch andere Probleme mit ausgewählten und habe darüber nachgedacht, es durch etwas anderes zu ersetzen. Dies liegt hauptsächlich daran, dass auf dem Master keine Updates durchgeführt werden.

@PilotBob Ich erwäge dieses Projekt: https://github.com/ivaynberg/select2
Sie haben das gleiche Überlaufproblem, aber ich denke, sie planen, auf Version 3 zu ändern.

@gil - Ihre Lösung funktioniert großartig, aber mit einer Breite von li.search-field bleibt sie auf 25px fixiert. Mit anderen Worten, wenn ich Ihre Beispielseite lade, werden die Menüs schön an das body Element angehängt, aber der Platzhaltertext und jede Eingabe sind auf 25px Breite beschränkt. Tatsächlich sieht es so aus, als ob die Methode search_field_scale nicht vorhanden ist. Übersehe ich hier etwas?

@rreusser Ich habe die Methode search_field_scale , da sie nur zur Mehrfachauswahl und zur korrekten Berechnung der Position verwendet wurde. Das war bei dieser Gabel nicht mehr nötig. Welchen Browser/welche Version/welches Betriebssystem testest du? Für mich ist die Suchfeldgröße korrekt bei example.jquery.html .

@rreusser Hallo , tut mir leid. Jetzt sehe ich, was nicht stimmt. Ich werde versuchen, es später heute zu beheben.

Kein Problem, @gil! Danke für die schnelle Antwort! Ich muss noch etwas experimentieren, aber es könnte auch nützlich sein, die Bindung an ein beliebiges Element zuzulassen – was auch ziemlich trivial sein sollte, denke ich. Ich habe ein Auswahlfeld in einem scrollenden div, und während Ihre Lösung das Abschneiden verhindert, bewegt sich das Menü beim Scrollen nicht mit dem div. Ich denke, alles was nötig ist, ist irgendwo ein zusätzliches Div, aber das wird einiges basteln.

@rreusser Ich habe diesen Commit rückgängig gemacht und das Problem behoben, das ich anders beheben wollte. Könnten Sie es bitte noch einmal versuchen und mir sagen, ob es bei Ihnen funktioniert?

Und über das Anhängen an ein anderes Element dachte ich darüber nach, es konfigurierbar zu machen. Aber Sie können Ihr Scroll-Problem mit einer kleinen Konfiguration lösen. Wenn Ihr <select /> keine direkten untergeordneten Elemente Ihres scrollenden Divs ist, versuchen Sie Folgendes:

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

Aber wenn der übergeordnete Knoten von <select /> Ihr <div /> , sollte dies nicht notwendig sein.

@gil , Wird dieser Fork mit dem Master zusammengeführt? Oder ist es noch im Test? Ich hatte auch ein Problem mit Tastatursteuerelementen in der Gabelung, die Pfeiltaste nach unten löst die Methoden results_show oder results_toggle nicht aus. Vielen Dank :-)

@myfriendtodd Ich weiß es noch nicht, vielleicht könnte ich einen Pull Request senden, wenn alle denken, dass es stabil ist. Aber ich denke immer noch, dass es noch mehr Tests braucht. Ich werde versuchen, die Tastaturprobleme dieses Wochenende zu beheben. Vielen Dank!

@myfriendtodd Hey, ich glaube, ich habe es behoben. Könnten Sie es bitte in Ihrem Projekt testen? ;)

danke @gil werde dich wissen lassen, wie es ausgeht. Danke für deine Hilfe :-)

@gil Vielen Dank für deine Gabel. Bei mir hat der Fix wunderbar funktioniert - genial!

Allerdings verwende ich den Kickstrap, um Chosen so zu stylen, dass es in Twitter Bootstrap passt. Dies führt dazu, dass Chosen mit diesem Fix sehr stark beschädigt ist – der Inhalt des Dropdown-Menüs wird am unteren Rand der Seite ohne Stil angezeigt – https://skitch.com/dyad/euys2/login . Soweit ich weiß, überschreibt Kickstrap nur die standardmäßigen Chosen-Stile.

Die LESS-Datei für die am Styling vorgenommenen Änderungen finden Sie unter https://github.com/ajkochanowicz/Kickstrap/blob/master/extras/chosen/chosen.less könnte passieren?

Vielen Dank.

Hallo Leute,

Ich arbeite an einer neuen Version mit einem anderen Ansatz, anstatt das Dropdown-Menü an den Körper anzuhängen. Diese Version ist viel sauberer und wird hoffentlich viele Fehler reduzieren, da die Änderung nicht so groß ist. Könnt ihr es mal ausprobieren, ob es funktioniert? Es ist in einem neuen Zweig:

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

@conatus Kannst du es bitte auch mit dieser Version versuchen? Die letzte Version im Zweig "master" hatte viele Änderungen an der CSS-Datei, diese Versionsänderung nur 3 Zeilen. Ändern Sie diese in Kickstraps Chosen CSS:

• Zeile 4, Änderung von "position: relativ;" zu "position: statisch;".
• Zeile 13 ändert sich von "position: absolute;" auf "Position: fest;".
• Fügen Sie in Zeile 128 eine neue Zeile "display: none;" unterhalb von "left: -9000px;" ein.

Ich hoffe, damit klappt es! ;)

Außerdem ist diese neue Version synchron mit dem Master-Zweig von Harvesthq!

Es tut mir leid, dass ich vorher nicht weitergeholfen habe, aber wir kamen zu einem anderen Teil des Projekts und dieser verschwand sehr schnell in der Ferne! Ich werde es aber testen und bei Gelegenheit melden. Vielen Dank für Ihre anhaltenden Bemühungen!

@gil - Ich

Dazu fallen mir nur 2 mögliche Lösungen ein:
1) Bei Auswahl innerhalb eines fest positionierten Elements sollte das Dropdown-Menü im chzn-Container platziert werden und ebenfalls eine feste Position erhalten. Die obere Position sollte durch die feste Position des Containers berechnet werden
2) Berechnen Sie die Dropdown-Position beim Scrollen neu

Die dritte Option besteht darin, die Dropdown-Liste jedes Mal zu fixieren, wenn sich die Auswahl in einem Container mit fester Position befindet.

@ragulka @ChiperSoft Ich sehe das Problem ... Nur um sicherzugehen, reproduziert diese jsfiddle, was ihr sagt? http://jsfiddle.net/QY256/

Ich werde versuchen, etwas dagegen zu tun. Es gibt eine neue Option namens overflow_container , die Scroll-Probleme behandelt, wie Sie sehen können, wenn Sie nur das div scrollen. Das Problem hierbei ist jedoch, dass es beim Scrollen des Fensters falsch positioniert wird.

Ich habe darüber nachgedacht, Chosen zu schließen, wenn etwas scrollt, da die Handhabung der Schriftrolle einige andere kleinere Probleme verursacht (z. B. wenn Ihr <select /> nur halb sichtbar ist).

@ragulka @ChiperSoft Können Sie auch als vorübergehende Lösung versuchen, Zeile 640 in der Methode update_position zu ändern, von:

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

zu:

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

@gil Ja und nein - die von Ihnen bereitgestellte jsfiddle zeigt das Problem, aber für mich trat es beim Scrollen des Körpers auf (mein festes Element hatte keine Bildlaufleisten). In Ihrer jsfiddle scheint das Problem aufzutreten, wenn ich den Inhalt des festen Elements scrolle, aber nicht beim Scrollen des Körpers.

@ragulka Ich weiß, dass es nicht die beste Lösung ist, aber ich denke, ich habe es hier behoben. Kannst du es versuchen? Nehmen Sie die Änderung in Zeile 640 vor, wie ich bereits sagte, und wenden Sie Chosen wie folgt an:

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

Dies sollte das Scrollen auf dem div und auf document handhaben und die Position fixieren.

Aber wie gesagt, ich denke, ich werde dies später ändern, damit Chosen ausgeblendet wird, wenn der Benutzer etwas scrollt.

Dies ist möglicherweise kein ausgewählter Fehler, aber ich habe zu select2 als Drop-in-Ersatz für selected gewechselt und das Problem verschwand, ohne dass irgendwelche Problemumgehungen durchgeführt werden mussten.

Vielen Dank dafür.

In der Zwischenzeit wurde Kickstrap aktualisiert - https://github.com/ajkochanowicz/Kickstrap/blob/beta/assets/Kickstrap/apps/chosen/chosen.css. Ihr neuer Branch funktioniert wunderbar, aber die von Ihnen vorgeschlagenen Änderungen am Kickstrap-CSS scheinen keine Wirkung zu haben. Was passiert, ist, dass das Dropdown-Menü selbst nicht mehr angezeigt wird. Irgendwelche Ideen? Vielen Dank.

Danke @gil!!! Ihre Filiale (https://github.com/gil/chosen/tree/new_version) hat mein Problem mit diesem speziellen Problem behoben.

Danke für alle Ratschläge. Ich habe einige geringfügige Änderungen an den obigen Vorschlägen vorgenommen, damit die Dropdowns mit den Modals von Bootstrap v2.1.1 und Chosen v0.9.11 funktionieren. Kleine Änderungen waren erforderlich, damit der .chzn-Drop beim erneuten Öffnen nach dem Scrollen der Seite korrekt positioniert wurde.

Hoffe das hilft anderen.

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

Also spielte ich ein wenig mit Chosen 0.9.11 und identifizierte die Änderungen, die ich an Chosen vornehmen musste...

Ich verwende Chosen in einem stark modifizierten jQueryUI-Dialog, der ziehbar ist und eine maximale Höhe mit Überlauf hat: Scrollen.

Um Chosen dazu zu bringen, sich so zu verhalten, wie ich es möchte, habe ich ".chzn-container .chzn-drop" in " position:fixed " geändert und " display:none " hinzugefügt. Dann habe ich in "Chosen.prototype.results_hide" " display:none " zu "this.dropdown.css" hinzugefügt...

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

Und in "Chosen.prototype.results_show" habe ich den Inhalt von "this.dropdown.css" durch " display:block " ersetzt.
Um die richtige Position des .chzn-drop div zu erhalten, habe ich die jQueryUI-Positionsfunktion hinzugefügt.

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

In "Chosen.prototype.search_field_scale" ändern...

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

... zu ...

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

Jetzt habe ich nur noch ein Problem:

Ich muss auf die Drag-Ereignisse des jQuery-UI-Dialogs hören, um den Drop-Chosen zu schließen, wenn jemand beginnt, den Dialog zu verschieben. Ich habe das bereits erreicht, aber der Code ist ziemlich schmutzig :-)

Besteht die Möglichkeit, dass der nicht triviale Fix aus diesem Zweig https://github.com/gil/chosen/commits/new_version auf GWTChosen portiert wird?
GWTChosen ist genial. Im aktuellen Zustand kann es jedoch nicht mit LayoutPanels verwendet werden.

Wie wäre es mit dem Hinzufügen einer neuen Funktion zur ausgewählten Bibliothek, bei der die Liste über dem Textfeld gerendert wird, indem einfach eine andere oder eine neue Klasse hinzugefügt wird? Auf diese Weise muss das Skript die Liste nicht außerhalb des Wrapping overflow:hidden div rendern und würde wahrscheinlich die meisten Probleme lösen, die andere haben. PS: Ich betrachte dies nicht als Problem mit overflow:hidden macht genau das, was es tun soll. Es ist eher schön, eine Funktion zu haben. Vielen Dank.

+1 Auf Klikerkos Vorschlag.

Genau wie @sillysachin verwende ich GWTChosen und habe das gleiche Problem mit LayoutPanels, overflow:hidden und ChosenListBox :/

Kennt jemand eine Lösung dafür? @sillysachin ist dir was

Tnx im Voraus :)

Wir haben es ad-hoc gepatcht, indem wir das Dropdown-Div aus dem übergeordneten Container gezogen haben. Leider bin ich von Release-Crush überschwemmt und werde mir die Zeit nehmen, den Patch zu bereinigen, bevor ich ihn hier einreiche.

Dieser Commit in https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983 behebt es einigermaßen gut. Es ist relativ aktuell, aber ich habe es nur für jQuery gemacht.

@robmcguinness Ich musste es etwas ändern, damit es funktioniert. Es erzeugt jedoch einen Fehler. wo Sie die Dropdown-Liste nicht schließen können.

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

und ich musste dem CSS eine Breite hinzufügen, sonst würde es 100% der Breite der Site entsprechen.

.modal .chosen-container .chosen-drop {
Position:fest;
Breite: 300px;
}

Ich konnte die Probleme mit dem obigen Code beheben. Kompatibel mit Version 1. Meins ist jedoch eher ein Rig, damit es funktioniert. aber bis jetzt funktioniert es richtig. Das letzte Problem, das ich sehe, ist die Größenänderung des Browsers, der aktuelle Mod funktioniert nicht.

Weiß jemand, ob eine der möglichen Korrekturen für dieses Problem bald in den Master-Zweig aufgenommen wird? Das ist ein Deal-Breaker für mich =/.

Wir haben Select2 verwendet ... es hat auch mehr Funktionen.

Am Do, 19.12.2013 um 11:24 Uhr, Daniel Hoffmann Bernardes <
[email protected]> schrieb:

Weiß jemand, ob eine der möglichen Lösungen für dieses Problem sein wird?
bald in den Master-Zweig eingegliedert? Das ist ein Deal-Breaker für mich =/.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/harvesthq/chosen/issues/86#issuecomment -30942420
.

Danke PilotBob, wird gewählt nicht mehr gepflegt? In diesem Fall sollten Sie die Dokumentation aktualisieren.

Es ist nicht mein Projekt. Ich "war" ein Benutzer davon. Aufgrund mehrerer Probleme haben wir gefunden
eine Alternative.

Am Do, 19.12.2013 um 11:53 Uhr, Daniel Hoffmann Bernardes <
[email protected]> schrieb:

Danke PilotBob, wird gewählt nicht mehr gepflegt? Wenn ja, möchtest du vielleicht
um die Dokumentation zu aktualisieren.

—
Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/harvesthq/chosen/issues/86#issuecomment -30945150
.

@DanielHoffmann Chosen wird weiterhin aktiv gepflegt. Select2 war ursprünglich ein Fork von Chosen, hat sich aber inzwischen so weit entfernt, dass es ein eigenes Ding ist.

Chosen ist absichtlich einfach gehalten – es sollte ein direkter Ersatz für select s sein, sodass viele komplizierte Funktionen und Konfigurationen vermieden werden. Select2 ging den umgekehrten Weg und fügte viele, viele Funktionen und Konfigurationen hinzu – es liegt an Ihnen, welche dieser Philosophien Sie mehr schätzen.

Was dieses _spezifische_ Problem betrifft, ist es leider nur das: ein Problem, keine Lösung. Wenn jemand einen Pull-Request sendet, um das Problem zu beheben, wird er für die Zusammenführung in Betracht gezogen. OSS ist jedoch nicht die Hauptaufgabe eines der Betreuer – sie arbeiten daran, wenn sie können, um ihre Vollzeitjobs herum. Also, wie immer "Pull Requests akzeptiert", wenn Sie versuchen möchten, es selbst zu beheben!

wann wird dieses problem behoben? es ist so alt, aber entscheidend für viele Projekte! bitte so schnell wie möglich adressieren!

Vielen Dank!

Es gibt viele Fixes in den Forks der ausgewählten, also warum nicht eine dieser Fixes verwenden?

@domnulnopcea Es gab noch nie eine PR, die einen Fix dafür eingereicht hat, nur doppelte Berichte. Wenn Sie eine Idee haben, das Problem zu beheben, senden Sie bitte eine PN. Wir werden es dann überprüfen. Derzeit ist mir keine Gabel bekannt, die dieses spezielle Problem behebt

Ich habe eine Lösung dafür, es ist kein sauberer Fork, es ist in einem anderen Repository vergraben und nur in der jQuery-Version. (Nein, ich bin nicht stolz auf mich)

Es funktioniert, indem es das Dropdown-Element zum body-Element hinzufügt und seine Position absolut festlegt, wenn die Seite gescrollt oder in der Größe geändert wird. Es funktioniert auch, ob das Dropdown-Menü über oder unter dem Feld sein soll und wie hoch es sein soll (damit es nicht von der Seite abgeschnitten wird).

Wenn dies etwas ist, an dem Sie interessiert sind (und es gibt tatsächlich keine anderen Forks), werde ich versuchen, etwas Zeit zu finden, um es abzustauben und eine Pull-Anfrage zu erstellen.

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

@stof was ist mit https://github.com/tompaton/chosen?

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

@domnulnopcea dies wurde noch nie zur Aufnahme in Chosen selbst

@stof wir schätzen Ihre Arbeit sehr. Ich verwende es in meinem eigenen Projekt (www.ubirimi.com). Aber jetzt, da ich Ihnen einen Link zu einem Commit gegeben habe, wären Sie so freundlich, sich diese Änderungen anzusehen und sie auf das offiziell ausgewählte Repository anzuwenden?

Danke vielmals

Da es nicht direkt angewendet werden kann (der Code hat sich seit 11 Monaten stark geändert), wird es einige Zeit dauern (und es muss auch getestet werden, um sicherzustellen, dass es richtig funktioniert). Also kann ich es jetzt nicht machen

@stof, danke, dass du darüber nachgedacht

@domnulnopcea Wenn es Ihnen so wichtig ist, gehen Sie die Änderungen durch und erstellen Sie selbst eine Pull-Anfrage. Das ist schließlich das Schöne an Open Source

@msaspence Das würde ich

Wir sind zu Select2 übergegangen, da es den Abruf von AJAX-Daten ermöglicht. Ihr wollt es euch vielleicht anschauen.

Ich denke, dass zu diesem Zeitpunkt alle auf Select2 umgestiegen sind. Gibt es Vorteile bei der Verwendung von Chosen?

Für mich hat die PilotBob-Lösung perfekt funktioniert!

Ich habe dies in meinem Code hinzugefügt:

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

Vielen Dank!!!

Das Problem besteht darin, dass die Position der Liste der Optionen absolute ist und der übergeordnete Container nicht erweitert wird. Eine Lösung, die ich vorschlage, besteht darin, es in float: left | right ändern, da es das übergeordnete Element erweitern kann, wenn ich nach dem Hinzufügen eines DOM-Objekts mit clear:both ein DOM-Objekt hinzufüge

Ich habe dies (verwendet mit jquery-ui dialog) mit folgendem in meinem CSS gelöst:

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

@grduggan können Sie eine Lösung im CSS der Bibliothek vorschlagen?
Ich denke, deine Lösung ist gültig. Stellen Sie eine Push-Anfrage!
+1

Habe das noch nie gemacht. Ich muss nachforschen. Wäre schön im CSS zu haben.

Ich sehe ein ähnliches Problem, wenn sich das Auswahlfeld am Ende der Seite befindet. Die native Auswahlbox löst dies, indem sie sich einfach öffnet, anstatt sie herunterzuklappen. Warum nicht?

Überlauf: sichtbar; auf container's div hat bei mir funktioniert! Vielen Dank.

Sie brauchen den overflow:hidden nicht immer

&:Vor,
&:nach {
Inhalt: " "; // 1
Anzeige: Tabelle; // 2
}
&:nach {
Lösche beide;
}

So funktioniert die Clearfix-Klasse in Bootstrap

Ich habe das CSS geändert (siehe unten). Scheint für mein Szenario zu funktionieren.

.chosen-container .chosen-drop {
Position: relativ; /_Von absolut geändert, um Überlaufabschaltung im Container zu vermeiden_/
Top 100%;
links: -9999px;
z-Index: 1010;
Breite: 100 %;
Rahmen: 1px solid #aaa;
Rand-Oberseite: 0;
Hintergrund: #fff;
Box-Schatten: 0px 4px 5px rgba(0,0,0,0.15);
}

.ausgewählter-Container .ausgewählte-Ergebnisse {
Farbe: #444;
Position: relativ;
Überlauf-x: versteckt;
Überlauf-y: auto;
Rand: 0 4px 4px 0;
Auffüllen: 0 0 0 4px;
maximale Höhe: 200px; /_Geändert von 240px_/
-webkit-overflow-scrollen: berühren;

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

}

Das Einschließen von select (und Chosen) in ein fieldset Element kann in Webkit-Browsern auch unerwünschte Effekte erzeugen (zB das Abschneiden, wenn ein Elternteil overflow: hidden ).
Dies liegt daran, dass Webkit standardmäßig min-width: -webkit-min-content; zu Fieldsets hinzufügt.

Das hat das Problem für mich gelöst:

fieldset { min-width: 0; }

@chassq hmm deine Lösung funktioniert bei mir nicht, .. siehe diesen Screenshot:

Ich habe ein div um die ausgewählten Selects mit

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

Danke an alle die schon die Lösung mit position: fixed

Hier ist eine jsfiddle mit der Lösung (überschreibt ausgewählte CSS-Klassen):
http://jsfiddle.net/jwbL8utx/1/ ;)

Ich habe immer noch 1 Problem, beim Herunterscrollen (mit max-height) hat der Ausgewählte einen Offset, wie Sie hier sehen können, wenn Sie nach unten scrollen und den zweiten Ausgewählten öffnen:

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

So habe ich es gelöst:

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

Für diesen Fix müssen Sie außer dem ausgewählten Menü selbst keine anderen Elemente ändern. Sie werden feststellen, dass das Menü wieder ausgeblendet wird, wenn Sie es "aufheben", aber dies entspricht meinen Anforderungen. Wenn Sie es die ganze Zeit im Vordergrund behalten möchten, können Sie ein Scroll-Ereignis an Ihren div-Container binden und das Ereignis '

@typologe Danke für deine ausgezeichnete Lösung.
Es gibt zwei kleinere Fehler in Ihrem JS, die ich jedoch erwähnen möchte:
In Zeile 51 sollte es lauten

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

andernfalls kann das Popup unter bestimmten Bedingungen verschoben werden

In Zeile 23 statt

$('.chosen-container')

Um die Ereignisse zu binden, denke ich, dass es besser wäre, zu verwenden

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

um mehrere Bindungen zu vermeiden, wenn die Funktion mehr als einmal mit verschiedenen selected() Widgets aufgerufen wird.

Bitte sagen Sie mir, gibt es eine Lösung für Chosen v1.4.2?

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

overflow-y: visible

Fügen Sie dies dem übergeordneten Div hinzu, das das Layout enthält. In meinem Fall war es ein Modal-Dialog-Sub-Div mit _overflow-y: auto_ und das Ersetzen durch _overflow-y: visible_ funktionierte für mich.

Gibt es schon eine Lösung für dieses Problem?

Dieses Projekt hat Ihre Antwort:
http://jsbin.com/finufihaji/edit?html

Ein wenig zu suchen und Tests durchzuführen ist die einfachste Lösung.

Ich musste die .chosen-drop und .chosen-results überschreiben und eine feste Höhe auf beide setzen, damit alle Optionen auswählbar und nicht von der übergeordneten div-Überlaufdirektive betroffen sind

Zumindest funktioniert das bei mir und die meisten meiner gewählten Felder haben nur 3 oder 4 Optionen. Nur 1 (der versteckte) hat etwa 12 und kann in naher Zukunft wachsen.

Ich habe folgendes auf das übergeordnete Div angewendet, das den Überlauf hatte: versteckt

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

Quelle: Stapelüberlauf

@doowruc Großartiger Hack!

Gibt es eine Methode zum Anhängen des ausgewählten Dropdown-Menüs an ein bestimmtes Ziel, sodass wir es anstelle eines Dialogfelds an den Dokumentkörper anhängen könnten? so das gewählte aus dem dialog herausfließt und nicht darin enthalten ist?

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

Hat bei mir funktioniert.

Ich weiß, dass ich damit immer noch zu kämpfen hatte. Hier ist eine Fiddle, die eine Option zeigt, das Element in den Körper zu verschieben und die absolute Positionierung auch beim Scrollen zuverlässig einzustellen.

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

https://github.com/R1p8p8e8r/chosen
Ich denke meine Lösung wird dir helfen