jquery-select2 ausgewählter Wert teilweise sichtbar

Question

Aus irgendeinem Grund zeigt selected2 (Version 4.0.3) in einigen Fällen einen teilweise ausgewählten Wert an.

HTML:

Selected value partially visible<select name="example" id="wraps"> 
<option value="71.0">Harju maakond</option> 
<option value="73.0">Hiiumaa</option> 
<option value="48.0">Ida-Virumaa</option> 
</select> 
<br> 
Selected value fully visible 
<select name="example2"> 
<option value="71.0">Harju maakond</option> 
<option value="73.0">Hiiumaa</option> 
<option value="48.0">Ida-Virumaa</option> 

</select> 

JS:

$('#wraps').select2({width: 'resolve', dropdownAutoWidth : true}); 

Ergebnis:

result

Geige auch https://jsfiddle.net/nhqzzf64/2/

Bei Verwendung der Standard-Dropdown-Liste sehe ich den Wert "Harju maakond" aber mit select2 sehe ich "Harju ma ..."

Einstellung der exakten Breite für Dropdown ist keine Option, weil ich nicht die maximale Breite kenne. Der Inhalt ändert sich.

Breite: 'Auto' Option ist auch nicht geeignet, weil ich die Breite nach der Seite fixieren will.

Gibt es eine Lösung, wie Sie die Breite wie im Dropdown-Menü festlegen?

Answer 1

können Sie versuchen, die select2 Box mit reinem CSS erweitert (man beachte die !important Regel):

.select2-container { 
    width: 200px !important; 
} 

diesen fiddle See.

Answer 2

die „Entschlossenheit“ Option erscheint nicht in 4.0.3

Ihre besten Wette unterstützt werden soll, Breite verwendet werden: 100%, wenn select2 Initialisierung und legen Sie das Element in einem Container Sie die Breite zu steuern.

$('#wraps').select2({ 
    width: '100%' 
}); 

$('#wraps').select2({width: '100%'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 

 
Selected value fully visible 
 
<select name="example" id="wraps"> 
 
<option value="71.0">Harju maakond</option> 
 
<option value="73.0">Hiiumaa</option> 
 
<option value="48.0">Ida-Virumaa</option> 
 
</select> 
 

 
<p></p> 
 
Selected value fully visible 
 
<select name="example2"> 
 
<option value="71.0">Harju maakond</option> 
 
<option value="73.0">Hiiumaa</option> 
 
<option value="48.0">Ida-Virumaa</option> 
 
</select>

Answer 3

Ich konnte Problem lösen, wenn die ursprüngliche Breite() und Spezifizierungs auch font-size über CSS und nach dieser Umwandlung Drop-down mit select2 bekommen().