Select element 100% width bug if option with long text is selected (Select2 bootstrap theme)

I am using select2 with bootstrap 3 theme and the select2 element overflow container if option with long text is selected and width of element is 100%.

This happens only in Mozilla Firefox!!

I create an example

.select2-container { width: 100% !important; } 

This is the code which affect on element overflow

span.select2-selection__rendered { white-space: nowrap; } 

5 Answers

Set inline style:

<select> 

Comment .select2-container extra css:

/*.select2-container { width: 100% !important; }*/ 

Add 'element' width on select2 init:

$('.select2').select2({ width: 'element', minimumResultsForSearch: Infinity }); }); 

Example:

If you are using bootstrap try this solution instead, adapted from a 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 { 

This works for me, using select2 together with bootstrap 4:

.select2-container{ width: 100% !important; } 

If you are use bootstrap then it works.

.form-group > .select2-container { width: 100% !important; } 

Add this line in your main CSS file

.select2-container{ width: 100% !important; } 

Put in jQuery:

$('.select2-container').css("width","100%");