Geek asks and answers

Sort width decreases when tag is removed in Select2

I am using Select2 to create a tag field. 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 this: the text box has the usual width on first load. After I inserted the tag, it will display correctly. But if I click on the backspace or click on the x tag to remove it, the text field is compressed in witdh to about 5px. What am I doing wrong? I also use twitter bootstrap, is there any kind of dependency?

+5
source share
4 answers

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 customize your own CSS by adding the following attribute:

containerCssClass: 'mySpecialClass'

CSS .

.mySpecialClass {
    width: 100%;
}

!

+3

, Bootstrap. , . , Select2.

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

, .

0

width select2.

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

, google. , . .menu ul load-styles.php WordPress

input , .

.

.menu ul {
    width: 97%;
}
-1
source

More articles:


All Articles