Wie kann ich eine select2-Eingabe dynamisch so skalieren, dass sie dieselbe Breite wie die ausgewählte Option hat?

Question

Ich baue eine 'natürliche Sprache' Suchformular mit einer Reihe von Inline-Select-Eingaben, mit jQuery Select2 für Styling. Die Breite der Select2-Eingänge scheint bei der Initialisierung auf die Breite der ausgewählten Option eingestellt zu sein, was sehr gut ist. Ich kann einfach nicht herausfinden, wie die Breite zu aktualisieren ist, wenn die ausgewählte Option geändert wird. Irgendwelche Ideen?

Vielen Dank!

Answer 1

versuchen, dies zu yor CSS-Datei hinzufügen:

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

Es löste meine Resize Probleme mit select2

(Edited: Ich benutze Platzhalter nicht)

Answer 2

Sie können Fenster Resize-Funktion .

Beispiel:

// Fix select2 width 
$(window).on('resize', function() { 
    $('.form-group').each(function() { 
     var formGroup = $(this), 
      formgroupWidth = formGroup.outerWidth(); 

     formGroup.find('.select2-container').css('width', formgroupWidth); 

    }); 
}); 

Live-- https://jsfiddle.net/Lwy6qnwy/

Answer 3

Genau so etwas wie dies für eine Website zu tun hatte, ist

$(e).on("select2:closing", function(e) { 
    if (e.hasOwnProperty('params') && 
     e.params.hasOwnProperty('args') && 
     e.params.args.hasOwnProperty('originalEvent') && 
     e.params.args.originalEvent.hasOwnProperty('target')) { 
      var newWidth = $(e.params.args.originalEvent.target).width(); 
      var id = $(e.params.args.originalEvent.target).attr('id'); 
      var container = $("span[aria-labelledby=\""+id.split("-result")[0]+"-container"+"\"]"); 
      $(container).parents('span.select2').width(newWidth + 21); 
    } 
}); 

Dies ist wahrscheinlich nicht narrensicher und mit dem Strom gebunden API. Es wird jedoch die Breite des Elements im Dropdown-Menü vor dem Schließen des Dropdownfensters angezeigt und anschließend auf den Container angewendet.

Eine Sache, die Sie beachten müssen, müssen Sie möglicherweise die Dropdown-Elemente schweben, um ihre tatsächliche Größe zu erhalten.

.select2-results__option { 
    float: left; 
    clear: both; 
}