Chosen: Fix für das Problem mit der Breite Null

Duplikat von #92.

Ich musste diese Änderung am Fix vornehmen:
if (/px/.test(this.form_field_jq.css("Breite"))){
this.f_width = this.form_field_jq.css("width").replace("px", "");
} anders {
this.f_width = this.form_field_jq.css("Breite");
}
da this.form_field_jq.css("Breite"); gab die Breite mit px am Ende zurück

Ich habe eine Lösung, und diese funktioniert gut in meinem Projekt:

this.f_width = this.form_field_jq.outerWidth(); // fügen Sie den folgenden Code unter dieser Zeile bei selected.jqeury.js hinzu

  if (this.f_width==0){ 
      var cloneObj= this.form_field_jq.clone();
      cloneObj.removeAttr('id');
      $(document.body).append(cloneObj);
      var w = cloneObj.width();
      cloneObj.remove();
      this.f_width=w;
  }

Ich hoffe, das hilft jemandem, da es in meinem Projekt gut funktioniert.

Ich habe gerade folgende CSS-Regel hinzugefügt:

.chosen-container
{
    width: 100% !important;
}

Danke fabioduque! CSS für den gewählten Container zu setzen hat mein Problem gelöst!

Sie müssen die Breite nicht wirklich in CSS festlegen. Sie können es richtig machen, wenn Sie Chosen initialisieren.

$(".chosen-select").chosen({ width: '100%' }); // any acceptable CSS width will work

Tatsächlich habe ich einen KO BindingHandler erstellt, um meine ausgewählten Elemente zu generieren, und nicht alle haben eine Breite von 100%, daher ist CSS der richtige Weg für mich. Obwohl ich die Breite als Option in meinem BindingHandler einstellen konnte.

Danke @fabioduque Bei mir hat es auch

@pfiller , danke! das hat mein problem gelöst.

warum passiert das manchmal? :(

Ich habe den CSS-Ansatz verwendet, weil ich nicht alle von mir ausgewählten Stellen durchsuchen wollte (und andere Entwickler könnten das gleiche Problem beim Erstellen neuer Ansichten haben). Die CSS behebt das Problem also global. Danke @fabioduque

Ich war in einer meiner Wordpress - Plugins mit bedingter Logik in dieser Ausgabe läuft ... speziell mit der Breite eingestellt wird auf 0px ... auch nach init (was ich Felder mit ausgewählten Warteschlange chosen:ready so , wenn es bereits init und ich verstecke das übergeordnete div) ... aber wie auch immer, dies habe ich verwendet, um dies zu beheben, wenn mein jQuery-Code ausgeführt wird, um das übergeordnete DIV-Element anzuzeigen, bevor chosen:updated

// This is the original select field
$field = $( '#' + field );

// This is the select field wrapper that I hide (just shown for reference)
$( '.fieldset-' + field ).show();

// Chosen container ID will be original select element ID + _chosen
var $chosen_container = $( '#' + field + '_chosen' );
if( $chosen_container && $chosen_container.width() === 0 ){
    $chosen_container.css( 'width', '100%' );
}

$field.trigger( 'chosen:updated' );

Falls noch jemand dieses Problem hat, überprüfen Sie, wann Sie $(.chosen-select").chosen() aufrufen. Ich hatte eine Liste von Javascript-Funktionsaufrufen beim Laden der Seite, als ich den Aufruf von .chosen () an den Anfang der Liste verschoben habe, wurde die Breite richtig angewendet, keine Nullbreite mehr. Die Funktionen, die ich oben verschoben habe, waren das Abrufen einiger Daten und das Ausführen vieler Dom-Operationen.

Warum habe ich 2 Suchsymbole, ich habe beide oben genannten Lösungen ausprobiert-