How to setup responsive X editable form field of type Select2 to work correctly on Bootstrap 3

Question

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:

<form role="form">
    <div class="row">
        <div class="form-group col-sm-4 col-xs-6">
            <label for="gender">Gender</label>
            <a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender">Male</a>
        </div>
        <div class="form-group col-sm-4 col-xs-6">
            <label for="gender">Gender2</label>
            <a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender">Male</a>
        </div>
    </div>
    <div class="row">
        <div class="form-group col-sm-4 col-xs-6">
            <label for="gender">Gender3</label>
            <a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender">Male</a>
        </div>
        <div class="form-group col-sm-4 col-xs-6">
            <label for="gender">Gender4</label>
            <a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender">Male</a>
        </div>
        <div class="form-group col-sm-4 col-xs-6">
            <label for="gender">Gender5</label>
            <a href="#" class="form-control gender" data-type="select2" data-value="M" data-name="gender">Male</a>
        </div>
    </div>
</form>

Script

$(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
        }
    });
});

Here is jsfiddle .

The problem can be seen if you click on editable dropdown (select).

I would like to achieve following behaviour of the select component:

1. position under label Gender regardless of the display size and regardless of being focused or not
2. same size regardless of being focused or not
3. responsive to change of the display size when it is focused, just like when it is not focused

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.

How can I achieve this?

Answer 1

Edited

If you want the select in your fiddle to behave responsively, then you have to remove the form-inline class. That class is specifically designed not to honor the typical form-control width:100% and enable your elements to float next to one another "inline".

The doc says that select2 elements will try to honor css in stylesheets but recommends inline style so this is what works for me:

HTML:

<div class="form-group">
    <label for="gender">Gender</label>
    <input type="hidden" id="gender" style="width:100%">
</div>

JS:

$(function(){
  $('#gender').select2({
    placeholder: 'Gender',
    data: [{id: 'M', text: 'Male'},{id: 'F', text: 'Female'}],
    minimumResultsForSearch: -1
  });
});