Selectbox's width shrinks on tag deletion in Select2

Question

I use Select2 to make a tagging box. I added the following 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>

And I used this JS:

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

The problem is: The text box has a normal width on first loading. After I inserted a tag it will be properly displayed. But if I click on backspace or click on the x of the tag to delete it, the text box shrinks in its witdh to around 5px. What am I doing wrong? I also use twitter bootstrap, is there some dependency?

Answer 1

This is a simple fix. Just change your code to this:

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

You can also set your custom CSS by adding the following attribute:

containerCssClass: 'mySpecialClass'

And then have some custom CSS assigned to handle the width.

.mySpecialClass {
    width: 100%;
}

Either of those will work!