Utilizing SelectBoxIt inputs () in Bootstrap 3 horizontal forms is causing an issue. I want the input to adjust and collapse along with the form width, but setting the widths to 100% is causing them to collapse instead.
To demonstrate the problem, I've prepared a JSFiddle. Any CSS experts out there who can offer a solution or suggestion?
http://jsfiddle.net/oceanexplorer/a5AZF/
HTML
<form class="form-horizontal">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">Option1</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<select name="foo">
<option value="1">Foo1</option>
<option value="2">Foo2</option>
<option value="3">Foo3</option>
<option value="4">Foo4</option>
<option value="5">Foo5</option>
<option value="6">Foo with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
</select>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label class="col-xs-4 col-sm-4 col-md-4 col-lg-4 control-label">Option1</label>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<select name="foo">
<option value="1">Foo1</option>
<option value="2">Foo2</option>
<option value="3">Foo3</option>
<option value="4">Foo4</option>
<option value="5">Foo5</option>
<option value="6">Foo with a really, really long text line that we shall use in order to test the wrapping of text within an option or optgroup</option>
</select>
</div>
</div>
</div>
</form>
CSS
.selectboxit-container .selectboxit-options,
.selectboxit-container .selectboxit
{
width: 100%;
}
.col-xs-8,
.col.sm-8,
.col-md-8,
.col-lg-8
{
border: 1px solid black;
}
Javascript
$("select").selectBoxIt({
autoWidth: false
});