How to set bootstrap drop down size? - html

Question

I am very new to designing .
My requirement is I want set the col-mg-2 for my select box.
but it's not adujestble Here I attached fiddle link
http://jsfiddle.net/soumyagangamwar/pno7xojh/2/
If I increse the option length the select box size also increaing. I want to fix it as col-mg-2, if drop down option lenght is much then it i=split two lines.
my code is like
<div class="form-group">
<div class="col-md-3">
<select class="form-control" ng-model="sourceColumn"
ng-options="column.label for column in operationColumn">
<option value="">Source Columns</option>
</select>
</div>
Please Help me?

Answer 1

wrap your select box one div with col-*-2
<form class="form-inline" role="form" name="joinGeneralInfo">
<div class="col-xs-2">
<select class="form-control" ng-model="sourceTable"
ng-options="tabelName.label for tabelName in operationData"
ng-change="getOperationColumns(sourceTable)">
<option value=""> Source Tables</option>
</select>
</div>
<div class="col-xs-2">
<select class="form-control" ng-model="sourceColumn"
ng-options="column in operationColumn">
<option value="">Source Columns</option>
</select>
</div>
</form>
http://jsfiddle.net/pno7xojh/4/

Answer 2

Try This:
You can adjust the width CSS
Add and id to your select
<select class="form-control" ng-model="sourceColumn" id="tableID"
ng-options="column.label for column in operationColumn">
Then use CSS to adjust the size:
#tableID
{
width:30%;//You can adjust the width to your required size.
}