select2を画面サイズ変更に対応させる

WEB制作
select2を画面サイズ変更に対応させる

Select2は、セレクトボックスで沢山の項目を表示するときにかなり便利にしてくれるライブラリで好きなのですが…

生成されたフォームが最初に読み込んだ時の幅で固定されてしまいます。 CSSでwidth: 100% !important;と指定してもいいんですが、これだと長めの項目が入ってきたときにはみ出してしまったりしてしまうので 画面がリサイズされたときにJSで幅の調整をさせてやらないといけません。

目次

サンプルコード

画面サイズ変更時、親要素の幅にSelect2を調整するサンプルです。

HTML

<div class="form-group">
  <label for="exampleFormControlSelect1">Example select</label>
  <select class="form-control" id="exampleFormControlSelect1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

JS

$(function(){
 
  // select2
  $('select').select2({width: 'resolve'});
 
  // resize select2 width
  $(window).on('resize', function() {
      $('form-group').each(function() {
          var formGroup = $(this),
              formgroupWidth = formGroup.outerWidth();
          formGroup.find('.select2-container').css('width', formgroupWidth);
      });
  });
 
});