Die Breite der Selectbox schrumpft beim Löschen der Tags in Select2

Question

Ich verwende Select2, um eine Tagging-Box zu erstellen. Ich habe den folgenden HTML-Code:

<select id="tags" multiple=""> 
    <option value="tag_1">Tag1</option> 
    <option value="tag_2">Tag2</option> 
    <option value="tag_3">Tag3</option> 
</select> 

Und ich verwenden, um dieses JS:

$(document).ready(function() { 
    $("#tags").select2({ 
     placeholder: "Select tag", 
     allowClear: true, 
     minimumInputLength: 2, 
     maximumSelectionSize: 1, 
    }); 
}); 

Das Problem ist: Das Textfeld hat eine normale Breite auf dem ersten Laden. Nachdem ich ein Tag eingefügt habe, wird es korrekt angezeigt. Aber wenn ich auf die Rücktaste klicke oder auf das x des Tags klicke, um es zu löschen, schrumpft das Textfeld in seinem wdith auf ungefähr 5px. Was mache ich falsch? Ich benutze auch Twitter Bootstrap, gibt es eine Abhängigkeit?

Answer 1

Das gleiche Problem, aber nur mit Bootstrap. Ich fand, dass das funktioniert. Dies sind die Klassen, die von Select2 generiert wurden.

#s2id_groupSelect, .select2-input, .select2-container, .select2-search-field, .select2-choices { 
width: 358px; 
} 

Stellen Sie die Breite auf das ein, was Sie benötigen.

Answer 2

Versuchen Sie, die Option width dem select2-Initialisierungscode hinzuzufügen.

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

Answer 3

Dies ist eine einfache Lösung. Ändern Sie einfach den Code dazu:

containerCssClass: 'mySpecialClass' 

Und dann einige benutzerdefinierte CSS haben zugewiesen, um die Breite handhaben:

$(document).ready(function() { 
    $("#tags").select2({ 
     placeholder: "Select tag", 
     allowClear: true, 
     minimumInputLength: 2, 
     maximumSelectionSize: 1, 
     width: '100%', 
    }); 
}); 

Sie auch Ihre eigenen CSS-Code, indem folgende Attribut festlegen.

.mySpecialClass { 
    width: 100%; 
} 

Entweder das wird funktionieren!

Answer 4

Ich habe das gleiche Problem Ich suchte mehr von Google Ich finde nicht die richtige Lösung, nach einigen Versuchen heute habe ich mein Problem gelöst. Das Problem in dem .menu ul Menü aus den load-styles.php innerhalb Wordpress Admin-Ordners

Der Code unten reduziert das input Textfeld in der Auswahlbox die Auswahlbox passen und nicht schrumpfen, nachdem die Umbauten zu entfernen.

Versuchen Sie das mit mir ist Arbeit

.menu ul { 
    width: 97%; 
}