select2 mit Bootstrap-Thema - innen zusammenfassen

Question

Ich kann das Dropdown-Menü select2 nicht an den übergeordneten Container (Kollaps) anpassen, wenn es ausgeblendet wird. Ich verstehe, dass dies kein Fehler ist, da select2 die Elternbreite nicht berechnen konnte. Aber ich konnte das nicht überwinden. Ich brauche es 100% zu dem Elternteil.

<div class="panel panel-default"> 
    <div class="panel-body"> 
    <div class="btn-toolbar"> 
     <button class="btn btn-default" data-toggle="collapse" data-target="#collapse-select2" aria-expanded="false">Toggle</button> 
    </div> 
    <div class="collapse" id="collapse-select2"> 
     <select class="form-control" data-role="select2"> 
     <option value="1">Option #1</option> 
     <option value="2">Option #2</option> 
     <option value="3">Option #3</option> 
     </select> 
    </div> 
    </div> 
</div> 

Fiddle: here

Kann jemand bitte helfen?

Answer 1

eigentlich ganz einfache Lösung:

1. CSS einzige Lösung
.select2 Breite von 100% geben und mit !important wie dies außer Kraft setzen:

.select2 { 
    width: 100%!important; /* overrides computed width, 100px in your demo */ 
} 

hier ist auch Geige Ihre aktualisierte https://jsfiddle.net/1agwbfmy/6/

---

2. Style-Tag für ausgewählte
anderen Weg, es zu tun, wie in documentation geschrieben ist Breite mit style-<select> Elemente zu geben, und es wird das Attribut von dort erhalten:
<select class="form-control" data-role="select2" style="width:100%">

---

3. Plugin-Konfiguration
schließlich können Sie die Breite beim Aufruf des Plugins in jQuery (wie in old docs geschrieben):

$('select[data-role="select2"]').select2({ 
    theme: 'bootstrap', 
    width: '100%' 
}); 

Answer 2

Verwenden Sie width: '100%' Eigenschaft in Config.

$('[data-role="select2"]').select2({ 
    width: '100%', 
    ... 
});