how to get select2 dropwdown to stay at constant width - css

Question

I am using select2 for a dropdown in a form and I like using a table layout (although maybe this is part of the problem?) to keep the widths of all of the form-group elements the same.
The problem is that when I type text into the select2 dropdown, the width changes (and in weird ways). Is there a way I can force the initial width that the browser gives the select2 dropdown to remain fixed?
Here is my html:
<table>
<tr>
<td>
<div class="row">
<div class="form-group">
<label>Title</label>
<input name="title" class="form-control"/>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="form-group">
<label>a label</label>
<input class="form-control"/>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="form-group">
<label>a label</label>
<select id="tag_list" class='form-control' multiple="multiple">
<option value='1'>abba</option>
<option value='2'>zabba</option>
<option value='3'>doo</option>
</select>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="form-group">
<label for="category_type">Category Type:</label>
<select name="category_type" id="category_type_list" class="form-control">
<option value="" disabled selected>If there is a matching type for the category, please select it</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row action">
<div class="form-group">
<div class="inline">
<button class="btn btn-primary form-control" type="submit">submit</button>
</div>
<div class="inline">
<button class="btn btn-primary cancel">Cancel</button>
</div>
</div>
</div>
</td>
</tr>
</table>
and my css:
.form-group{
display: block;
}
table {
margin-left: 5%;
table-layout: fixed;
}
input {
height: 30px;
border: 1px solid #e3e3e3;
padding: 3px 10px;
width: 100%;
}
.inline{
float:left;
margin-right: 5px;
}
span.select2-container{
width: 100% !important;
tex-overflow: ellipsis;
}
Here is a fiddle example. You can try it out by typing something long enough into the select2 dropdown and pressing enter seeing that the width changes. How can I stop that from happening?

Answer 1

I Added a new css class that seems to work aimed at that specific select box.
The + is equivalent to the jquery next function. This should get you pointed in the right direction. Just to be safe, make sure this is set after you load the select2 css.
#tag_list + .select2-container .select2-selection--multiple {
max-width: 400px;
}
So if you want the search box to be the same size for all select2s (single or multi ) then try...
.select2-container .select2-dropdown,
.select2-container .select2-selection--multiple {
max-width: 300px;
}
I turned the last select box into a select2 and tried this.
What I am doing is using the DOM explorer built into IE to find the element that is giving me issues and what classes are being applied. Then I simple overwrite or append them.

Answer 2

by setting width=100% as below
<select id="tag_list" style="width:100%; display:block;" class='form-control' multiple="multiple">
<option value='1'>abba</option>
<option value='2'>zabba</option>
<option value='3'>doo</option>
</select>

Answer 3

.select2 dropdown to stay at constant width in table tag use below style in your code
<style>
.select2-container{
width: 100% !important;
}
</style>