Select Element 100% Width Bug If Option with Long Text Is Selected (Select2 Bootstrap Theme)

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:

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%");