title: How to setup responsive X editable form field of type Select2 to work correctly on Bootstrap 3
body: <p>I need responsive editable form field of type select2 and with the label above it. Here is my attempt (simplified code) using Bootstrap3, X editable and Select2:</p>
  
  <pre><code>&lt;form role="form"&gt;
      &lt;div class="row"&gt;
          &lt;div class="form-group col-sm-4 col-xs-6"&gt;
              &lt;label for="gender"&gt;Gender&lt;/label&gt;
              &lt;a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender"&gt;Male&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-sm-4 col-xs-6"&gt;
              &lt;label for="gender"&gt;Gender2&lt;/label&gt;
              &lt;a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender"&gt;Male&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="form-group col-sm-4 col-xs-6"&gt;
              &lt;label for="gender"&gt;Gender3&lt;/label&gt;
              &lt;a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender"&gt;Male&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-sm-4 col-xs-6"&gt;
              &lt;label for="gender"&gt;Gender4&lt;/label&gt;
              &lt;a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender"&gt;Male&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="form-group col-sm-4 col-xs-6"&gt;
              &lt;label for="gender"&gt;Gender5&lt;/label&gt;
              &lt;a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender"&gt;Male&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>$(function(){
      $.fn.editable.defaults.mode = 'inline';
      $('#gender').editable({
          showbuttons: false,
          source: [
              {id: 'M', text: 'Male'},
              {id: 'F', text: 'Female'}
          ],
          select2: {
              width: '100%', // THIS DOESN'T WORK AS IT SHOULD
              // hiding search box
              minimumResultsForSearch: -1
          }
      });
  });
  </code></pre>
  
  <p>Here is <a href="http://jsfiddle.net/2kYNq/14/" rel="nofollow">jsfiddle</a>.</p>
  
  <p>The problem can be seen if you click on editable dropdown (select). </p>
  
  <p>I would like to achieve following behaviour of the select component: </p>
  
  <ol>
  <li>position under label Gender regardless of the display size and regardless of being focused or not</li>
  <li>same size regardless of being focused or not</li>
  <li>responsive to change of the display size when it is focused, just like when it is not focused</li>
  </ol>
  
  <p>In other words, I want focused select component to behave just the same as when it is not focused, to have same position, size and responsiveness. Now it does maintain height, thanks to added css, but it doesn't have the same position, and it is not responsive, as when it is not focused.</p>
  
  <p>How can I achieve this?</p>