How can i make the dropdown the size to fit the content (in my case it happens when shrinking the browser to less than some certain size, then content start to dissapear? I preferably do not want any custom css, anything built in to bootstrap to support this?
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate>
<div class="well">
<div class="form-group">
<label class="col-xs-3 control-label"><strong>4.</strong> Select thing</label>
<div class="col-xs-2">
<select class="form-control">
<option>Short
</option>
<option>Medium lenght
</option>
<option>Much much much longer text not fitting when resizing
</option>
</select>
</div>
</div>
</div>
</form>Option 1: You can add width:auto to the select, although then it will always size to fit the longest content, and ignore your col class. See the snippet:
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form class="form-horizontal" role="form" enctype="multipart/form-data" id="inputForm" name="inputForm" novalidate>
<div class="well">
<div class="form-group">
<label class="col-xs-3 control-label"><strong>4.</strong> Select thing</label>
<div class="col-xs-2">
<select class="form-control" style="width:auto;">
<option>Short
</option>
<option>Medium lenght
</option>
<option>Much much much longer text not fitting when resizing
</option>
</select>
</div>
</div>
</div>
</form>Option 2 would be to use an inline form, see this bootply for a functioning example