CODEWITHSUNDEEP
jqueryselectwidthjquery-select2
tester
tester

Reputation: 3987

Selectbox's width shrinks on tag deletion in Select2

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?

Upvotes: 5

Views: 4855

Answers (4)

Shwan Namiq
Shwan Namiq

Reputation: 631

I have the same problem I searched more from google I don't find the correct solution, after some attempts today I solved my problem. The problem in the .menu ul menu from the load-styles.php within WordPress admin folder

The below code reduce the input text field within the select box to fit the select box and don't shrink after removing the tags.

Try this is work with me correctly

.menu ul {
    width: 97%;
}

Upvotes: -1

AJ Quick
AJ Quick

Reputation: 171

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!

Upvotes: 5

Edwin Lunando
Edwin Lunando

Reputation: 2816

Try adding the width option to the select2 initialization code.

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

Upvotes: 1

Kevin Kirtley
Kevin Kirtley

Reputation: 9

Having the same problem but only with Bootstrap. I found this to work. These are the classes I found being generated by Select2.

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

Set width to whatever you need to.

Upvotes: 0

Related Questions