JSFiddle - React, Tailwind, and code Playground

by bradacjan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<div class="container">
  <div class="container">
    <h1>
          Select2 Tests
        </h1>

    <div class="alert alert-success">
      <p>
        All tabs are now fixed and display proper widths.
      </p>
      <p>
        You may select various solutions for the original problem:
      </p>
      <ul>
        <li>
          Via CSS: We unset the inline style and let the css define the width. See 'ViaCss'.
          <ul>
            <li>
              I think this is the best way. đź‘Ť
            </li>
          </ul>
        </li>
        
        <li>
          Via Select2Default: The default method by the original author. See Select2Default.
          <ul>
            <li>
              Fine, but you will need the other methods if you want a different width (or wrap your selects2 in some other container.)
            </li>
          </ul>
        </li>
        
        <li>
          Via Event Reaction: we define width when tab is loaded.
          <ul>
            <li>
              Fine, but I think you should define styles in your CSS.
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab" aria-expanded="true">Tab 1</a></li>
        <li role="presentation" class=""><a...

CSS

/* ViaCss: Set the width. It will work since the inline style width is removed. */
.select2-container {
  width: 100%;
}

/* ViaCSS: We can, of course, define other widths for specific occasions */
.shorter-selects2 .select2-container {
  width: 80%;
}

/* My comment class*/
.comment{
  font-style: italic;
}

JavaScript

// ViaSelect2Default: set default for all selects.
// $.fn.select2.defaults.set("width", '100%'); 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var tabPath = $(e.target).attr("href"); 
  var $tab = $(tabPath);
  
  unsetInlineWidthOfSelect2($tab);
  
  unobscurePlaceholdersOfSelect2($tab);
});

/**
 * Unsets the inline-defined width of all select2 containers inside the 
 * element.
 * @param $element A jQuery object containing the element.
 */
function unsetInlineWidthOfSelect2($element) {
  $element.find('.select2-container').each(function (i, selectTwoContainer) {
  	// ViaCss: If you want control via CSS, set width to ''
    $(selectTwoContainer).css('width', ''); 
    // ViaEventReaction: If you want full width
    //$(selectTwoContainer).css('width', '100%'); 
  });
}

/**
 * Makes sure all Select2 placeholders are visible inside the element.
 * @param $element A jQuery object containing the element.
 */
function unobscurePlaceholdersOfSelect2($element) {
	// PlaceholderObscured: Solution for the partially hidden placehodler:
  $element.find('select').each(function (i, select) {
	  var $select = $(select);
    
    // Make sure that the select has Select2. From the official Select2 docs:
    // https://select2.org/programmatic-control/methods#checking-if-the-plugin-is-initialized
    if($select.hasClass("select2-hidden-accessible")) {
    	var currentData = $select.select2('data');
      // We re-set the values, which will trigger the resizeSearch method.
  	  $select.val(currentData).trigger('change');
    }
  });
}

$(function() {
  // Activate Select2
  $('#tab1_select2_single').select2();
  $('#tab1_select2_multiple').select2();
  $('#tab2_select2_single').select2();
  $('#tab2_select2_multiple').select2();
  $('#tab3_select2_single').select2();
  $('#tab3_select2_multiple').select2();

  // Width hack
  $.fn.select2.defaults.set("width", '100%');
  $('#tab4_select2_single').select2();
  $('#tab4_select2_multiple').select2();

 ...