If you have a Select2 control within a form-group or input-group div in a Bootstrap UI, a long value can cause the Select2 to grow to become wider than its container. In this post, I’ll show how to fix the issue.
The Problem with Large Values
In this demo, I have a form with two columns of fields, each within a well (which makes the container size very clear).
In one field, there is a very long value. This usually isn’t an issue when you have explicit control over the options, but if you have an application where a drop-down box’s choices come from a plain text field on other documents, it’s possible.
When I select the long value, it limits the amount of text displayed in the box to what will fit on one line, but it expands the size of the Select2 outside of its container.
If I remove the second column of fields and re-test, it looks like the Select2 was enlarged to be the same the size as the parent container, which is too big for the area that it’s supposed to be in.
Fixing with CSS
This is a known issue with Select2 inside of a form-group or input-group within Bootstrap.
Fortunately, there’s a simple CSS fix, adapted from this post on github
.form-group .select2-container {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
display: table;
table-layout: fixed;
}
If you’re using an input-group instead of a form-group, then change the first line to this:
.input-group .select2-container {
