Chosen: wenn select zunächst ausgeblendet ist, funktioniert es nicht

Ja, Sie sollten das Kaffeeskript patchen. Außerdem bin ich für die Möglichkeit, versteckte Elemente einzurichten.

+1 ist heute auf dieses Problem gestoßen

+1 wie ich

Als Workaround können Sie die Breite des erstellten div mit einem !important Flag festlegen:

#my_select_chzn {
  width: 100% !important;
}

Tatsächlich bringt Sie dies näher an den Ort, an dem Sie sein müssen. Die Breiten sind nicht perfekt, aber alles wird sichtbar sein.

#my_select_chzn {
  /* This is the only width setting you'll need to change. */
  width: 100% !important;
}
#my_select_chzn .chzn-drop {
  width: 100% !important;
}
#my_select_chzn .chzn-drop .chzn-search {
  width: 99% !important;
}
#web_template_exploit_name_chzn .chzn-drop .chzn-search input {
  width: 98% !important;
}

Eine frühere Version von Chosen hat tatsächlich getestet, ob die Formularfeldbreite über CSS festgelegt wurde. Wenn ja, wurde die Breitenberechnung nicht verwendet. Ich denke, ich bevorzuge diese Methode der Fehlerbehebung dem Hinzufügen von 30 Codezeilen zum Testen versteckter Elemente. Würde so etwas für Sie funktionieren?

Breite einstellen:

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

JS testet zuerst die Setbreite:

  <strong i="10">@f_width</strong> = if @form_field_jq.css('width')? then parseInt(@form_field_jq.css('width'),10) else @form_field_jq.width()

@pfiller Ihr Code enthält einen kleinen Fehler. Wenn der Inline-Stil eine Breite in einer anderen Einheit als Pixel hat (wie em), interpretiert der Code ihn als Pixel. siehe Zeile 56 in selected.jquery.coffee

Ich denke, die Leute werden sich ständig darüber beschweren und Sie müssen letztendlich diese 30 Zeilen Code hinzufügen.

Hallo @pfiller , das geht nicht. Sowohl width() als auch css("width") geben 0 für versteckte Elemente zurück. Ich verwende die getHiddenDimensions-Technik und sie funktioniert gut.

btw, du musst es sowohl für f_width als auch in get_side_border_padding verwenden

+1 dafür.

Ein Großteil der Logik auf der Site, auf der ich Chosen integriere, beruht darauf, dass einige Selects beim ersten Laden ausgeblendet werden, sodass wir alle möglichen Probleme damit bekommen.

+1 auch. Sichtbarkeitsprüfungen sollten eingebaut werden.

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

Was ist mit der Lösung, bei der die Dropdown-Breite beim ersten Start nicht dauerhaft festgelegt ist und beim Öffnen nur auf die Breite des Textfelds angepasst wird? Auf diese Weise müssen Sie die Breite der Eingabe nicht berühren, nehmen Sie einfach an, dass sie mit CSS festgelegt ist, und lesen Sie sie jedes Mal, wenn Sie das Dropdown-Menü öffnen.

+1 dafür. Ich habe mich entschieden, Chosen in einen Feldtyp für das ExpressionEngine CMS umzuwandeln, aber die Veröffentlichungslayouts von EE ermöglichen das Ausblenden von Feldern beim Laden der Seite.

Ich bin mir nicht sicher, ob dies zusammenhängt, aber im Fall von EE wäre es am besten, wenn die Breite fließend wäre oder einfach immer 100% des enthaltenden Elements wäre ...

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

Auf diesen gestoßen ... es passiert immer noch in der neuesten Version

+1
Dieser Fehler blockiert die Verwendung des Chosen-Plugins für interne Apps bei Netflix

:+1: Zu diesem Thema bin ich heute auf dieses Problem gestoßen

Sie können Ihren Inhalt ausblenden mit: position: absolut; links: -999em;
Auf diese Weise können Screenreader und Google sie auch "lesen", und Ihr Ausgewähltes Dropdown-Menü WIRD sichtbar, wenn es erneut angezeigt wird.

Mein Pull-Request behebt dieses Problem, aber wie mein anderer und viele der ausgewählten werden sie ignoriert. Dieses Projekt hat zu viele Mitwirkende mit einer zu kleinen Codebasis.

DelvarWorld, danke für deinen Patch. Das hat mich genervt, und ich war gerade dabei, eine ähnliche Lösung zu implementieren, und dachte, ich würde noch einmal überprüfen, ob dies bereits jemand getan hat.

Ich werde dies kurz nach dem Testen im Produktionscode bereitstellen.

@DelvarWorld auf welchen Pull-Request beziehen Sie sich? Ich sehe eine offene Pull-Anfrage von Ihnen, die dieses Problem nicht anspricht.

@pfiller Der oben in diesem Thread aufgeführte, https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

Wichtiger als die Verwendung von CSS ist es, beim Rendern der Ergebnisse die "aktuelle" Breite des Elements zu verwenden, anstatt eine falsch zwischengespeicherte Breite aus der Konstruktion von Chosen zu verwenden.

Es gab viele Änderungen, und ich bin mir nicht ganz sicher, wie ich sie selbst am besten zusammenführen kann. Wird es in Kürze eine zusammengeführte Version geben?

@bewest tut

@delvarworld Ich weiß,

Können Sie versuchen, Ihren Zweig mit automatischer Breite mit HEAD auf den neuesten Stand zu bringen? Ich habe Ende August versucht, aus einer ähnlichen Kasse zusammenzuführen, aber das Eingabefeld hat jetzt die falsche Breite (es ist zu breit und überschreitet die Breite des ausgewählten Containers).

Ich schaue mir das an, aber es gab auch einige Re-Organisationen ... der Konstruktor wurde zugunsten einer setup- und finish_setup-Methode entfernt. Ich bin auch nicht mit Coffeescript vertraut, daher könnte Ihr Fortschritt beim Zusammenführen schneller sein als bei mir und beim Senden einer Pull-Anfrage meine Hilfe, da dieses Problem anscheinend sehr interessiert ist.

Tatsächlich hat sich mein Zweig über genau diese Änderung hinweg entwickelt, und schließlich habe ich die Arbeit an der Prototypversion aufgegeben. Meine Schuld, und ich denke, an dieser Stelle ist es nicht zusammenführbar.

@DevarWorld Ja, es muss ein wenig überarbeitet werden, damit einige Bits in die abstrakte Implementierung

Wären Sie bereit, es noch einmal zu versuchen?

Eine höfliche Beule ... arbeitet jemand daran?

Chosen funktioniert bei mir nicht, da es meine Auswahl verbirgt und dann die Breite nicht berechnen kann. Ich muss es hacken, indem ich willkürlich eine Breite für jede der chzn-Komponenten in CSS festlege. Dies scheint nicht so zu sein, wie dies funktionieren soll, und es sieht wirklich nicht einmal normal aus wie auf den Websites, auf denen ich es gesehen habe.

Ich bin auch auf dieses Problem gestoßen. Wie sich herausstellt, ist die gewählte Methode zum Abrufen der Breite eines Elements in früheren Versionen von jquery fehlerhaft (es tut mir leid, aber ich habe nicht die genauen Versionsnummern). Wie oben erwähnt, trat der Fehler auf, wenn ein Element nicht sichtbar war und die Breite 0 zurückgab. Dieser Fehler ist sehr gut dokumentiert und es gibt viele Möglichkeiten, ihn zu umgehen.

Die Lösung für uns bestand darin, einfach auf die neueste Version von Jquery zu aktualisieren. Ja, wir mussten einige Patches und Tests von altem Code durchführen, der jquery verwendet, aber auf lange Sicht behebt es viele Probleme und reduziert die Notwendigkeit kleiner Hacks in Ihrem js/css.

Ich installiere das neueste jquery, das in den Schienen jquery gem und jquery-ujs enthalten ist. Ich nehme an, das ist noch zu alt?

Ja, eine aktuelle Versionsnummer wäre schön. Ich kann bestätigen, dass 1.6.2 ist
auch zu alt.

Am Mittwoch, 16. November 2011 um 11:23 Uhr, Kevin Elliott <
[email protected]

schrieb:

Ich installiere das neueste jquery, das im Rails jquery gem . verpackt ist
und jquery-ujs. Ich nehme an, das ist noch zu alt?

@RoyJacobs newest derzeit 1.7, wie es veröffentlicht wurde.

@RoyJacobs Ich kann bestätigen, dass wir 1.6.4 ohne Probleme verwenden.

Das ist merkwürdig. Ja, das jquery-rails-Gem verwendet jQuery 1.7. Aber bei mir funktioniert es immer noch nicht.

Sie können sehen, dass es nicht mit einer Breite gerendert wird. Die Inspektion zeigt, dass alle berechneten Breiten 0px betragen. Dies tritt auch dann auf, wenn ich .chzn-select in CSS oder direkt im style-Parameter des select-Tags auf eine Breite gesetzt habe.

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

Auf jeden Fall ärgerlich. Das Select scheint display:none zu bekommen (ich vermute vom gewählten Javascript), und ich kann mir nur vorstellen, dass es dann die Breite nicht richtig berechnen kann.

Die Gedanken?

Ich wünschte wirklich, ich könnte dies unter JEDEN Umständen zum Laufen bringen (auch wenn ich es erzwingen muss). Nichts scheint zu funktionieren. Ich werde gezwungen sein, dies ganz aufzugeben (und ich werde mich sicherlich nicht noch einmal mit diesem kaputten Zeug beschäftigen wollen).

Stellen Sie sicher, dass Ihre Auswahl CSS, Stylesheet oder Inline enthält. Wenn Sie dies mit Stylesheet tun, müssen Sie das Element in das DOM einfügen, bevor Sie selected() aufrufen.

Aber ich stimme zu, dass es sehr schwierig ist, dies richtig zu machen. Ich würde wirklich gerne in der Lage sein, dem ausgewählten Select per CSS eine Breite zuzuweisen. Eine Klasse, eine Breite, px oder %.
Mein CSS würde dann so aussehen

.Beispiel auswählen, .Beispiel .chzn-smth {
Breite: 50%;
}

Und dies würde die Breite korrekt anwenden, egal wie oder wann oder wo Sie gewählte aufrufen.

Ich habe es inline und über Stylesheet versucht, ohne das Verhalten zu ändern.

Ziemlich erhebliches Problem für Leuchtkästen und Akkordeons. Arbeitet jemand an einem Patch?

Ich glaube nicht, dass das jemand ist! Ich bin schockiert, weil ich nicht verstehe, wie das für irgendjemanden nutzbar ist. Ich verstecke meine Inhalte nicht einmal künstlich. Der Aufruf selected() scheint dies zu tun. So seltsam.

@kevinelliott Ich denke, diejenigen, die dieses Problem hatten, sind entweder weitergezogen oder haben eine Lösung gefunden. Wie gesagt, in unserem Fall ging es einfach darum, jquery zu aktualisieren. Denken Sie auch daran, dass wir unsere gestylt haben-Element eine Breite von 224px haben und wir setzen 'display: none;' direkt auf dem Element und nicht in einem Stylesheet.

Ich hoffe, das ist hilfreich für Sie und Sie können es zum Laufen bringen.

Danke Richard. Ich habe meine jQuery aktualisiert und das hat nicht geholfen. Das Seltsame ist, dass ich mein Select-Element nicht verstecke. Auserwählt versteckt es. Ich bin mir also nicht einmal sicher, was passiert.

@kevinelliott Np. Ich bin gespannt, stellst du die Breite deiner einElement überhaupt? Wenn ja, verwenden Sie Prozentsätze oder Pixel?

Ich bin. Ich stelle es mit Pixeln ein. Ich habe versucht, es direkt mit dem style-Attribut auf das Element zu setzen, und ich habe es auch in CSS versucht.

@kevinelliott Um ehrlich zu sein, bin ich ein bisschen ratlos. Die einzigen verbleibenden Vorschläge, die ich habe, sind 1) das Auswahlelement in ein Element zu packen (wir tun dies und unsere Arbeit funktioniert gut) und 2) die ausgewählte Bibliothek durchzugehen, um herauszufinden, an welcher Stelle ausgewählt Ihr ausgewähltes Element versteckt wird ... Ich musste dies auch tun, als wir auf unsere Probleme stießen.

Tut mir leid, ich konnte nicht mehr helfen.

Ich habe einen Fall, dass selbst bei einer festen Breite in der gewählten Breite eine Breite erstellt wird: 0px.
Ich kann mir nicht vorstellen warum, funktioniert in dieser Situation nicht und funktioniert in anderen...

@tiagobrito : Ich habe genau das gleiche Problem und konnte es nie lösen, behoben oder nicht.

@RichardBlair Danke für deine Hilfe. Wenn dir noch etwas einfällt, lass es uns wissen :)

+
selbes problem bitte behebe es

@tiagobrito , @dhampik können Sie eine kleine Zusammenfassung zusammenstellen, die das Problem demonstriert?

@bewest habe ich schon herausgefunden! Es wird angehängt, wenn ich jquery 1.4.x in meinen Projekten verwende.
Am nächsten Montag werde ich Ihnen die richtige Version von jquery mitteilen, die mir die Breite verursacht: 0px

@bewest bestätige ich auch,
dass alte Versionen von jquery (ich nehme an, vor 1.6.4)
das Layout von select durcheinander bringen, das anfangs ausgeblendet ist
Hier sind 2 Geigen:
unordentliches Layout (alte jquery): http://jsfiddle.net/dhampik/2E9fG/
korrektes Layout (neue jquery): http://jsfiddle.net/dhampik/Rs9Z3/

Gott sei Dank wurde die Version von jquery mit der neuen kommenden Version des Yii-Frameworks aktualisiert.)

Ich habe dieses Problem, wenn ich versuche, Chosen in Trac zu integrieren. Die ersten Auswahlfelder im Eigenschaftsformular eines Tickets haben die Breite 0. Die Eigenschaften sind standardmäßig ausgeblendet und können durch Klicken auf einen Link erweitert werden. jQuery v1.7.1

Update: Ich habe das Problem umgangen, da zumindest der im Foliotek-Blog-Beitrag erwähnte CSS-Trick mit jQuery 1.7.1 nicht funktionierte. Den JS-Ansatz habe ich noch nicht ausprobiert.

Mein Workaround (für Trac):

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

für diejenigen, die jQuery <= 1.7.1 . verwenden

Ich habe dieses Problem mit jQuery Actual umgangen
Choosed.jquery.js#301 geändert von
this.f_width = this.form_field_jq.outerWidth();
zu
this.f_width = this.form_field_jq.actual( 'outerWidth' );

//bearbeite thx @koenpunt für den 1.7.2-Kommentar

@mittag Laut der README von jquery.actual wird dies nur für jQuery-Versionen vor 1.7.2 benötigt

Ältere Versionen von jQuery (>=1.7.1) haben Probleme, die Breite/Höhe von unsichtbaren DOM-Elementen zu finden.

@mittag vielen Dank, dass Sie festgestellt haben, dass nach der Implementierung des eigentlichen Plugins das Problem mit

Ich habe dieses Problem immer noch, habt ihr eine Idee, wie ich es beheben kann?

Das gleiche hier immer noch ein Problem - ich kann nicht glauben, dass das schon seit Jahren so ist...

Ich bin auch auf dieses Problem gestoßen. Würde mich über etwas Hilfe freuen.

Dieser CSS-Trick scheint zu funktionieren:

/* Fix 100% width */
.chzn-container, .chzn-drop, .chzn-drop .chzn-search, .chzn-drop .chzn-search input {
  width: 100% !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width */
.chzn-container { width:250px !important; }

@gyopiazza. Bei mir hat es das Problem behoben. Dankeschön.

FWIW Ich habe festgestellt, dass das Festlegen einer Mindestbreite (auch ohne !important) für .chzn-container-, .chzn-drop- und .chzn-search-Eingaben auch für anfänglich versteckte Auswahlen funktioniert.

Mein Workaround

CSS:

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

html:

Anstatt die Breite im select-Element festzulegen, füge ich dem ursprünglichen select-Element ein Wrapper-Div hinzu und setze die Breite des Wrappers.

Chosen bietet jetzt eine Option zum Initialisieren mit einer festgelegten Breite, die jeden Berechnungsversuch überschreibt. Dies ist wahrscheinlich eine zufriedenstellende Problemumgehung für die meisten Anwendungsfälle, bei denen die Auswahl am Initialisierungspunkt ausgeblendet ist:

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

Ich denke, dass diese Problemumgehung wahrscheinlich so ist, wie wir es tun werden, um diesen Fehler zu beheben. Ich möchte wirklich vermeiden, Code einzufügen, der die Auswahl zum Messen vom Bildschirm verschiebt, da dies die Komplexität erhöhen würde.

Hat jemand ein Problem damit, diesen Fehler basierend auf dieser Lösung zu schließen?

Ich habe Version 0.9.8 verwendet und meine versteckten Auswahlen funktionierten normal. Heute habe ich do 0.9.14 aktualisiert und sie funktionieren nicht mehr. Ich habe die minnifizierte Version verwendet. Wenn ich auf die normale Version wechsle funktioniert alles wieder einwandfrei (chosen.jquery.js 0.9.14). Es ist normal? Es ist ein Fehler im Minnifying-Prozess?

Keines der versteckten funktioniert bei mir nicht auf jQuery min oder in voller Größe 0.9.14.

Die neue Option 'Breite' hat bei mir funktioniert. Funktioniert zumindest für neu ausgewählte Eingänge, die zuvor ausgeblendet waren.

@trisweb Dies ist ein Open-Source-Projekt und Feindseligkeit ist hier nicht willkommen. Es gibt viele Leute hier, die viel Zeit und Energie investiert haben, um Chosen zu dem zu machen, was es heute ist. Bitte versuchen Sie, zur Verbesserung des Projekts beizutragen oder kommentieren Sie nicht. Vielen Dank.

@kenearley Ich bin mir der Open-Source-Etikette voll bewusst und hätte meinen Kommentar effektiver gestalten sollen. Das tut mir leid.

Abgesehen davon glaube ich wirklich, dass man manchmal jemanden braucht, der über all den Lärm hinwegschreit.

Ich schlage vor, dass ein Nullwert für die Breite eines beliebigen ausgewählten Elements nicht logisch ist, und es sollte eine zuverlässige Methode entwickelt werden, mit der die richtige Breite bestimmt wird. Andernfalls sollte ein vernünftiger Standardwert verwendet werden, und aus vielen Gründen, die selbstverständlich sein sollten, ist Null kein vernünftiger Standardwert.

Es kann ein schwieriges Problem sein, weshalb es diesen Fehler schon so lange gibt, aber ich bin zuversichtlich, dass es eine Lösung gibt. Ich persönlich glaube nicht, dass das neue 'width'-Attribut das Problem löst, da dies immer noch mehr auf der Konfiguration als auf der Konvention beruht und daher möglicherweise dazu führt, dass die im Standardfall gewählte Nullbreite nicht funktioniert.

Abgesehen davon glaube ich wirklich, dass man manchmal jemanden braucht, der über all den Lärm hinwegschreit.

Nein. Es besteht keine Notwendigkeit, über den Lärm hinweg zu schreien. Wenn jemand stark genug davon ist, wie der Code geschrieben werden sollte, kann er einen Pull-Request anbieten oder das Repo abspalten und nach Wunsch ändern.

Trotzdem schätze ich Ihr Follow-up und stimme zu, dass die derzeitige Lösung nicht ideal ist. Im weiteren Verlauf werden wir nach besseren Lösungen suchen und würden uns sehr über Pull Requests von jedem freuen, der daran interessiert ist, dies zu ändern.

@kenearley Ich stimme Ihrer Meinung zur Rhetorik höflich nicht zu – aber natürlich spricht Code immer mehr als Worte. Dies ist für uns im Moment ein irritierendes Problem, daher kann ein Pull-Request kommen, wenn ich eine gute Lösung finde.

:+1: zur Behebung!

Ich habe Chosen jetzt seit fast zwei Jahren im Auge und es ist immer noch die eleganteste Verbesserung der ausgewählten Benutzeroberfläche. Aber dieses versteckte Problem ist immer noch ein großer Deal-Breaker, und 100 % Breite ist keine Lösung.
+1, um dies zu beheben. Go-Team gewählt!

+1 für Abhilfe

Zusätzlich zu der offiziellen Problemumgehung, die es dem Anrufer ermöglicht, die Breite programmgesteuert festzulegen, würde ich auch eine anständige Problemumgehung vorschlagen, die lose auf dem folgenden Thread basiert:

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

Der Workaround basiert im Wesentlichen auf dieser Funktion:

// to be placed anywhere before the jquery.chosen initialization
    var getHiddenOffsetWidth = function (el) {
    // save a reference to a cloned element that can be measured
    var $hiddenElement = $(el).clone().appendTo('body');
    // calculate the width of the clone
    var width = $hiddenElement.outerWidth();
   // remove the clone from the DOM
   $hiddenElement.remove();
   return width;
};

Wich wird dann von folgendem Mod des jquery.chosen Codes aufgerufen (ab 1.0.0):

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + (($(this.form_field).is(":visible"))
            ? this.form_field.offsetWidth
            : getHiddenOffsetWidth(this.form_field)) + "px";
    }
};

Siehe auch #795 für weitere Details dazu.

Eine schnelle Lösung. Anstatt Ihr select verstecken, machen Sie $(elem).chosen(options) und dann ein $(elem).hide() dh erstellen Sie zuerst das ausgewählte Element und verstecken Sie es dann. Auf diese Weise bleibt das ursprüngliche width .

Steht das noch nicht fest, 3 Jahre offen?

+1 für diesen Fix

Version 0.9.8 hatte diesen Fehler nicht! Früher haben Sie jquery externalWidth aufgerufen, um die Breite zu erhalten, jetzt verwenden Sie HTML offsetWidth, was Null ergibt ...

Ich glaube, er meint, es ist eine Regression, was vielversprechend ist. War da?
Grund für die Abkehr von der jQuery-Methode?

@pfiller Ich hatte dieses Problem mit jQuery 1.10.2 und Ihre $("select").chosen({ width: '50%' }); Lösung funktioniert hervorragend für mich. Dies ist eine praktikable Problemumgehung für meine Anwendungsfälle.

Ich verwende $(this.form_field).outerWidth() , um die Offsetbreite unter dem vollständigen Code zu erhalten:

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

+1 Ich brauche diese Lösung wirklich. Ich blende ein Formular standardmäßig aus und der Benutzer muss auf eine Schaltfläche klicken, um es anzuzeigen. Da es ausgeblendet ist, wird die Breite meiner Auswahl nicht richtig eingestellt

@henesnarfel - Vielleicht möchten Sie versuchen, einfach den Workaround zu verwenden, den @pfiller hier gepostet hat: https://github.com/harvesthq/chosen/issues/92#issuecomment -18163306

Stoß, Problem ist immer noch da. Dafür sollte es eine integrierte Lösung geben. Ich würde dem +1 geben.

Die einzige Möglichkeit, die mir einfiel, war Zeile 455 (zumindest in meinem Editor), die den folgenden Code von der Funktion container_width zurückgibt:

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

und ersetzt es durch

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

Das Problem ist verschwunden.

@ayyash behebt das Problem nicht vollständig. Macht es nur besser als Breite 0.

Für mich hat dies den Trick gemacht (tragen Sie Ihre eigenen Größen zum Vergnügen ein):

/* Fix  width bug */
.chosen-container, .chosen-drop, .chosen-drop .chosen-search, .chosen-drop {
  width: 220px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Input Box has to be slightly smaller, don't know why and I don't care. */
.chosen-search input {
    width: 210px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width of the whole thing */
.chosen-container { width:220px !important; }

Vielen Dank

@Thinklabsnk Danke, nette und schnelle Lösung.

BEARBEITEN: Dies funktioniert nur, wenn alle Ihre ausgewählten Elemente die gleiche Breite haben.

Hier ist meine Problemumgehung dafür, basierend auf einigen der anderen Vorschläge. Es klont die versteckten Eingaben und hängt sie an den Körper an, um die Breite zu messen, aber es setzt auch die Sichtbarkeit der Klone vor dem Anhängen auf versteckt, damit sie nicht auf dem Bildschirm angezeigt werden.

Finden Sie diese Codezeile in selected.jquery.js (Zeile 455 in meiner Version):

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

und ersetze es durch dieses:

        var calculatedWidth = this.form_field.offsetWidth;
        // Fix for zero width on hidden inputs.
        if (0 == calculatedWidth) {
          var clone = this.form_field_jq.clone();
          clone.css("visibility", "hidden");
          clone.appendTo('body');
          calculatedWidth = clone.offsetWidth;
          clone.remove();
        }
        return "" + calculatedWidth + "px";

Ich hoffe, das hilft.

@danjjohnson Danke, das hat

Das einzige was ich ändern musste:

clone.offsetWidth; 

zu

clone.outerWidth();

Aus irgendeinem Grund gab mir clone.offsetWidth einen undefinierten Wert.

Mit freundlichen Grüßen,

Dieser Fehler tritt in Firefox auf, testen Sie niemals in Chrome oder anderen.

1. Bild (oben)
Die gewählte eingestellte Breite, da sie über eine Bildlaufleiste verfügt, während dies nicht der Fall ist. Dies ist ein falsches Ergebnis.

2. Bild (Mitte)
Gewählte Breite, da es eine Bildlaufleiste wie das erste Bild hat, aber diesmal eine Bildlaufleiste, die korrekt ist.

3. Bild (unten)
So sollte das erste Bild sein, wenn es keine Bildlaufleiste hat. Für diesen Test wurde die gewählte Breite auf width: 100% !important

:thumbsup: für @danjjohnsons Fix mit @johnmerceds Modifikation

Ich habe eine andere Lösung, einfach und funktioniert. Der Punkt in Lassen Sie die Breite nicht Null werden:

   // don't let the width to be "0"
   $(".chosen-select,.chosen-multiple-select").each(function(){
        if($(this).width() == 0){
            $(this).width(240);
        }
    });
    // call it :)
    $(".chosen-select,.chosen-multiple-select").chosen({allow_single_deselect:true});

Hallo,
Meine Lösung für dieses Problem ist eine Kombination der bisher geposteten Lösungen (gewählt 1.2.0):

    AbstractChosen.prototype.container_width = function () {
        if (this.options.width != null) {
            return this.options.width;
        } else {
            //Original:
            //return "" + this.form_field.offsetWidth + "px";
            //Workaround:
            if(this.form_field.offsetWidth > 0) {
                return "" + this.form_field.offsetWidth + "px";
            } else {
                if($(this.form_field).css('width')) {
                    return parseInt($(this.form_field).css('width'),10) + "px";
                } else {
                    return "" + $(this.form_field).outerWidth() + "px";
                }
            }
        }
    };

Definieren Sie einfach eine statische CSS-Breite in px für die versteckten Selects.

Eine Gesamtkorrektur ist noch erforderlich.

Das Problem hierbei ist, dass wenn Sie die Größe des Fensters ändern, die Auswahl immer in der gleichen Größe angezeigt wird, wie sie initialisiert wurde. Ich denke, eine bessere Lösung wäre, die Größe der Auswahl zu ändern, wenn sie angezeigt wird oder wenn die Größe des Fensters geändert wird, anstatt die Breite zu erraten, die es bei der Initialisierung annehmen sollte, wenn es ausgeblendet ist.

Gibt es keine Möglichkeit, die Größe des ausgewählten Objekts dynamisch zu ändern? Da ich weiß, wann ich die Größe ändern muss (Resize-Ereignis oder onShow oder ähnliches), könnte dies ein Workaround sein. Gibt es eine API-Funktion, um die Größe des ausgewählten Objekts zu ändern? Oder irgendwie neu initialisieren?

:+1: zur Lösung. Bin heute darauf gestoßen

:+1: _Weg_ zu viel Zeit verschwendet, um das herauszufinden.

Habe immer noch ein Problem mit der Größe in Modals. Irgendein Plan, es in Version 4.0 zu beheben?

@danjjohnson Ihr Fix behebt das Problem nicht, wenn das erste Element viel kleiner ist als andere

basierend auf @danjjohnson das hat bei mir funktioniert

hacken

Zeile finden

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

ersetzen mit

var calculatedWidth = this.form_field.offsetWidth;
          // Fix for zero width on hidden inputs.
          if (0 == calculatedWidth) {
              var clone = this.form_field_jq.clone();
              clone.css({"left": 10000, "position": "fixed"});
              clone.appendTo('body');
              calculatedWidth = clone.outerWidth();
              clone.remove();
          }
          return "" + calculatedWidth + "px";

$('select').chosen({width: '100%'}); von @pfiller hat für mich in einem zusammenklappbaren Panel gearbeitet.

Vielen Dank

Wie kann ich die gewählte Suchklasse loswerden, da ich die Assets nicht in mein Projektverzeichnis laden kann?

Ich musste eine Zeitüberschreitung hinzufügen, wenn statische Auswahlen aus einer Vorlage geladen wurden, die noch nicht gerendert wurde. Nichts in der Hierarchie hatte Metriken, als es versucht wurde, eine Initialisierung durchzuführen. Wenn Sie es in ein Null-Timeout einschließen, wurde die Initialisierung zumindest an das Ende der Ereigniswarteschlange gestoßen.

// Found this in chosen.jquery.js and patched it as follows
AbstractChosen = (function () {
    function AbstractChosen(form_field, options) {
        if (!AbstractChosen.browser_is_supported()) {
            return;
        }

        var self = this;
        window.setTimeout(function () {
            self.form_field = form_field;
            self.options = options != null ? options : {};
            self.is_multiple = self.form_field.multiple;
            self.set_default_text();
            self.set_default_values();
            self.setup();
            self.set_up_html();
            self.register_observers();
        }, 0);
    }

Ich wurde gerade von diesem Fehler gebissen, das Problem wurde zu 100% für mich behoben.

@harvesthq würden Sie einen Pull-Request akzeptieren, um dies zu beheben? Ich bin mir noch nicht sicher, wie die beste Lösung ist, aber ich würde gerne eine Korrektur vornehmen und eine Pull-Anfrage stellen :heart:

Eine robuste Problemumgehung dafür ist die Verwendung von ng-if anstelle von ng-show. Funktioniert einwandfrei und ist einfach.

Ich habe herausgefunden, dass ng-if in vielen Situationen die bevorzugte Wahl ist. Nicht nur das Reparieren von defektem ng-select, sondern auch das Zulassen von rekursiven Controllern (mit einer Kombination von ng-if, ng-controller, ng-init und ng-template).

also scheint dieses 4 Jahre alte Problem immer noch nicht gelöst?!?!

+1

+1 in der Zwischenzeit... Ich verwende select2

Gibt es eine Möglichkeit, ein Spinner im Bereich zu erweitern, wenn auf die ausgewählte Auswahlliste geklickt wird? Dies muss passieren, während Daten an die ausgewählte jquery angehängt werden. Ich verarbeite eine große Anzahl von Datensätzen in ausgewählte jquery und es braucht Zeit, sie zu verarbeiten und anzuzeigen. ??

Was für ein epischer 5-Jahres-Bug... und immer noch Leute beißen (autsch!).

Google hat einen ähnlichen Fehler mit seiner Karte, die in einem versteckten Div nicht richtig angezeigt wird. Für beide Probleme gibt es jedoch Problemumgehungen, die einfach zu implementieren sind.

Ja, ich bin letztes Jahr im IIRC auf diesen Google Maps-Bug gestoßen, aber wie viele Leute verbrachten einen halben Tag damit, zu fluchen und verschiedene Dinge auszuprobieren, bevor sie diesen Bericht fanden? Fehler wie diese in beliebten Bibliotheken verschwenden Stunden an Zeit. Multipliziert mit der Anzahl der Leute, die jedes Jahr eine dieser Bibliotheken lernen, sind die Gesamtkosten wahrscheinlich schwindelerregend ... Wenn sie es nicht reparieren, ist das in Ordnung. Die Behebung an dieser Stelle könnte seltsamerweise mit einer großen Anzahl von bereitgestellten Problemumgehungen interagieren ... In diesem Fall sollten sie zugeben, dass sie es nicht beheben, und die Problemumgehung an einer prominenten Stelle in der Dokumentation dokumentieren, damit die Leute nicht damit kämpfen (oder verpassen) Fristen über dieses Zeug.

Mein "Gesamt"-Fix ähnelt anderen und geht davon aus, dass die Breite aller meiner Auswahlen im Markup 100 % des übergeordneten Divs beträgt. Wir verwenden Bootstrap, also ist dies bei uns der Fall.

Führen Sie diesen Code direkt nach der Initialisierung von .chosen() beim Laden der Seite aus.

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

Für diejenigen unter Ihnen, die ein Problem hatten, bei dem das Element, wenn es sich zunächst in einem versteckten CSS-Container befand und dann, wenn es sichtbar gemacht wurde, eine Breite von 0px hatte, die Lösung, die ich gefunden habe, darin bestand, die Breite in der js-Konfiguration festzulegen;

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

Dann habe ich den select-Eingaben die CSS-Klasse selected-select-width gegeben

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

Scheint mit der ausgewählten v1.6.2 und der jquery-Version 3.1.1 den Trick zu machen.

Ich lasse einfach die standardmäßig gewählte Breitenoption (auto) und füge hinzu

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

zum CSS meiner Website (Anpassung der Mindestbreite nach Bedarf). Dadurch wird es nie zu 0px (oder einfach zu klein, um es zu verwenden), während es nach Möglichkeit immer noch die ideale Breite der Auswahl einpasst (das Erzwingen einer Breite von 100% oder etwas in diesem Sinne funktioniert nicht gut, wenn Sie ausgewählte Elemente inline mit anderen Inhalten haben und dies Methode befasst sich mit dem Kernproblem, ermöglicht Inline-Auswahlelemente und bietet anscheinend die einfachste und unkomplizierteste Implementierung).

Wie ist das nach SIEBEN Jahren noch kaputt?

Mein Workaround mit Bootstrap 3 fügt den folgenden Stil hinzu:

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

Mein Workaround mit Bootstrap 3 fügt den folgenden Stil hinzu:

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

Kaufen, dann wird das Dropdown immer noch nicht angezeigt ....

es ist bereits dokumentiert
https://harvesthq.github.io/chosen/options.html
Überprüfen Sie die Option width und ihre Beschreibung

@qbadev Obwohl dies dazu führt, dass das Element bei Bedarf nicht an den Inhalt

Die Beschreibung der Dokumentation ruft effektiv nur den Fehler auf (der möglich sein sollte, zu beheben) und erwähnt, dass dies als mögliche Problemumgehung für den Fehler verwendet wird.

@koenvanderlinden empfiehlt min-width:90%; so dass es normalerweise eine Breite von 90 % hat, wobei die Breite auf 100 % erhöht wird, wenn der Inhalt der Auswahl dies erfordert. Andererseits entscheide ich mich immer noch für min-width:5em; (der genaue Wert variiert je nach Anwendungsfall), damit es nie zu klein ist, aber es versucht immer noch, sich an den Inhalt der Auswahl anzupassen, anstatt die Größe basierend auf dem übergeordneten Element zu ändern Element.

@KZeni Ich habe nicht gesagt, dass es eine Lösung ist. Es ist nur dokumentiert. Und es ist eine gute Lösung. Mein Hauptproblem war, dass Chosen nach der Initialisierung fast 0 Breite hatte. Jetzt, nach "fix", kann ich die Auswahl sehen und damit machen, was ich will, indem ich CSS-Klassen verwende, die auf das übergeordnete Element angewendet werden.

Ich hatte schon oft solche Probleme, die nicht berechnet werden konnten, weil das Objekt eine Breite von 0 hatte. Es kann nicht allgemeingültig gelöst werden, da jede Anwendung unterschiedlich ist.
Wenn also eine Auswahl in einem Moment der Initialisierung sichtbar ist, ist keine Aktion erforderlich, aber wenn sie ausgeblendet ist, können Sie die Option width verwenden.

Unterstützung für benutzerdefinierte Breite
Die Verwendung einer benutzerdefinierten Breite mit Chosen ist so einfach wie das Übergeben einer Option beim Erstellen von Chosen:
$(".chosen-select").chosen({width: "95%"});

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

Ich habe dieses Problem nach dem jQuery-Upgrade von 1. * auf 3. * gefunden.
Habe das gelöst:

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