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

Question

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;
}

Urbanity

I think this might be a known issue, but I don't have Firefox right now to test it. Does the overflow issue still happen if you remove the Bootstrap theme and just use the default? – Coccyx

Yes it does. For now I resolved with templateSelection but it is not the right way. – Urbanity

Answer 1

Set inline style:

<select class="select2" style="width:100%">

Comment .select2-container extra css:

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

Add 'element' width on select2 init:

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

Example: http://jsfiddle.net/chemark/z9sLqLbx/

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 {

Glue

Answer 2

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

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

Beacon

Answer 3

If you are use bootstrap then it works.

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

Chequered

Answer 4

Add this line in your main CSS file

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

Smirk

Answer 5

Put in jQuery:

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

Arbogast