JSFiddle - React, Tailwind, and code Playground

by vitorbarbosa

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-3.2/select2.css">
<script src="http://ivaynberg.github.com/select2/select2-3.2/select2.js"></script>
<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
        <p>I'm in Section 1.</p>
        <select name="s1" id="s1" class="select2-init" style="width:300px;">
            <option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>            
        </select>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
        <select name="s2" id="s2" class="select2-init" style="width:300px;">
            <option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>            
        </select>
    </div>
  </div>
</div>

CSS

.tabbable {
    padding: 10px;
}

JavaScript

jQuery(document).ready(function($){
    console.info("ready");
    
    $.fn.select2.defaults.width = "resolve";
    
    $(".select2-init").select2();
});