Why is Select2 calculating the wrong size?

Question

No matter what I do, Select2 seems to calculate the wrong width and the option text gets cut off. I have tried this in both Chrome and Firefox and simplified things down to almost nothing with no success. Is this just a flawed plugin or is there something I'm missing that will make it calculate the correct size?

$('select').select2();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<select><option value="123">test option</option></select>

I have also tried setting width : "auto" in the Select2 options but this has the undesirable effect of making the width dynamic, i.e., it changes as you select options.

Answer 1

Select2 documentation container width

Select2 will try to match the width of the original element as closely as possible. Sometimes this isn't perfect, in which case you may manually set the width configuration option

See below

$('#default').select2();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

default width<br>
<select><option value="123">test option</option></select><br>
<select id="default"><option value="123">test option</option></select> 

You can use an alternative solution by taking the width of the select element with jQuery outerWidth and adding an additional number of pixels when setting the width parameter of the select2 plugin

$('.workaround').each(function() {
  let width = $(this).outerWidth(false);
  // console.log(width);
  $(this).select2({
    width: ((width + 30) + 'px')
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

Workaround using select element width + 30px
<br>
<select class="workaround">
  <option value="123">test option</option>
</select>
<br>
<select class="workaround">
  <option value="123">test option</option>
  <option value="456">test larger size option</option>
  <option value="789">test extremely larger size option</option>
</select>
<br>
<select class="workaround">
  <option value="123">test option</option>
  <option value="456">test larger size option</option>
  <option value="789">test extremely larger size option</option>
  <option value="101">test really extremely larger size option</option>
</select>

You can set a width css inline select tag

$('#widthInline').select2();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<select id="widthInline" style="width: 150px;">
  <option value="123">test option</option>
</select> width 150px by inline style

You can use css class in select tag

$('#widthByClass').select2();

.widthByClass {
  width: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<select id="widthByClass" class="widthByClass">
  <option value="123">test option</option>
</select> width 250px by css class