I have problem making this plunkr (select2 + angulat-ui) work.
http://plnkr.co/edit/NkdWUO?p=preview
In local setup, I get the select2 work, but I cannot set the width as described in the docs. It is too narrow to be used.
Thank you.
EDIT: Never mind that plnkr, I found a working fiddle here http://jsfiddle.net/pEFy6/
It looks like it is the behavior of select2 to collapse to the width of first element. I could set the width through bootstrap class="input-medium"
.Still not sure why angular-ui doesn't take config parameters.
This question is related to
css
twitter-bootstrap
angularjs
jquery-select2
ui-select2
Add width resolve option to your select2 function
$(document).ready(function() {
$("#myselect").select2({ width: 'resolve' });
});
After add below CSS to your stylesheet
.select2-container {
width: 100% !important;
}
It will sort the issue
On a recent project built using Bootstrap 4, I had tried all of the above methods but nothing worked. My approach was by editing the library CSS using jQuery to get 100% on the table.
// * Select2 4.0.7
$('.select2-multiple').select2({
// theme: 'bootstrap4', //Doesn't work
// width:'100%', //Doesn't work
width: 'resolve'
});
//The Fix
$('.select2-w-100').parent().find('span')
.removeClass('select2-container')
.css("width", "100%")
.css("flex-grow", "1")
.css("box-sizing", "border-box")
.css("display", "inline-block")
.css("margin", "0")
.css("position", "relative")
.css("vertical-align", "middle")
Working Demo
$('.select2-multiple').select2({_x000D_
// theme: 'bootstrap4', //Doesn't work_x000D_
// width:'100%',//Doens't work_x000D_
width: 'resolve'_x000D_
});_x000D_
//Fix the above style width:100%_x000D_
$('.select2-w-100').parent().find('span')_x000D_
.removeClass('select2-container')_x000D_
.css("width", "100%")_x000D_
.css("flex-grow", "1")_x000D_
.css("box-sizing", "border-box")_x000D_
.css("display", "inline-block")_x000D_
.css("margin", "0")_x000D_
.css("position", "relative")_x000D_
.css("vertical-align", "middle")
_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />_x000D_
_x000D_
<div class="table-responsive">_x000D_
<table class="table">_x000D_
<thead>_x000D_
<tr>_x000D_
<th scope="col" class="w-50">#</th>_x000D_
<th scope="col" class="w-50">Trade Zones</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>_x000D_
1_x000D_
</td>_x000D_
<td>_x000D_
<select class="form-control select2-multiple select2-w-100" name="sellingFees[]"_x000D_
multiple="multiple">_x000D_
<option value="1">One</option>_x000D_
<option value="1">Two</option>_x000D_
<option value="1">Three</option>_x000D_
<option value="1">Okay</option>_x000D_
</select>_x000D_
</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
</div>_x000D_
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
_x000D_
select2 V4.0.3
<select class="smartsearch" name="search" id="search" style="width:100%;"></select>
add method container css in your script like this :
$("#your_select_id").select2({
containerCss : {"display":"block"}
});
it will set your select's width same as width your div.
With > 4.0 of select2 I am using
$("select").select2({
dropdownAutoWidth: true
});
These others did not work:
In my case the select2 would open correctly if there was zero or more pills.
But if there was one or more pills, and I deleted them all, it would shrink to the smallest width. My solution was simply:
$("#myselect").select2({ width: '100%' });
Setting width to 'resolve' didn't work for me. Instead, i added "width:100%" to my select, and modified the css like this :
.select2-offscreen {position: fixed !important;}
This was the only solution that worked for me (my version is 2.2.1) Your select will take all the available place, it is better than using
class="input-medium"
from bootstrap, because the select is always staying in the container, even after resizing the window (responsive)
You can try like this. It works for me
$("#MISSION_ID").select2();
On hide/show or ajax request, we have to reinitialize the select2 plugin
For example:
$("#offialNumberArea").show();
$("#eventNameArea").hide();
$('.selectCriteria').change(function(){
var thisVal = $(this).val();
if(thisVal == 'sailor'){
$("#offialNumberArea").show();
$("#eventNameArea").hide();
}
else
{
$("#offialNumberArea").hide();
$("#eventNameArea").show();
$("#MISSION_ID").select2();
}
});
This is an old question but new info is still worth posting...
Starting with Select2 version 3.4.0 there is an attribute dropdownAutoWidth
which solves the problem and handles all the odd cases. Note it is not on by default. It resizes dynamically as the user makes selections, it adds width for allowClear
if that attribute is used, and it handles placeholder text properly too.
$("#some_select_id").select2({
dropdownAutoWidth : true
});
Easier CSS solution independent from select2
//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />
//CSS
.input-xxsm {
width: 40px!important; //for 2 digits
}
.input-xsm {
width: 60px!important; //for 4 digits
}
.input-sm {
width: 100px!important; //for short options
}
.input-md {
width: 160px!important; //for medium long options
}
.input-lg {
width: 220px!important; //for long options
}
.input-xlg {
width: 300px!important; //for very long options
}
.input-xxlg {
width: 100%!important; //100% of parent
}
Wanted to add my solution here as well. This is similar to Ravindu's answer above.
I added width: 'resolve',
as a property within the select2:
$('#searchFilter').select2({
width: 'resolve',
});
Then I added a min-width
property to select2-container
with !important
:
.select2-container {
min-width: 100% !important;
}
On the select element, the style='100px !important;'
attribute needed !important
to work:
<select class="form-control" style="width: 160px;" id="searchFilter" name="searchfilter[]">
Source: Stackoverflow.com