how to fix the form-control width?

Question

I've the following code in HTML:

<div class="col-sm-12">
  <div ng-repeat="param in plugin.wsdlURLs track by $index" class="col-sm-12">
    <select class="form-control col-sm-4" ng-model="test" ng-options="lOrU for lOrU in localOrUrl">
    </select>
    <input type="url" class="form-control col-sm-8 invalidInput">
  </div>
</div>

I got a problem that, when I put a form-control class it will show the select in one row and the input in another row. I want to keep the form-control class, and to show the select and input in the same row. I know that the problem is from the form-control, because the width is 100%

Solution 1

well you're nesting a lot of col-sm columns inside of each other, wich results in a mess. try this:

<div ng-repeat="param in plugin.wsdlURLs track by $index" class="row">
        <div class="col-sm-4">
            <select class="form-control" ng-model="test" ng-options="lOrU for lOrU in localOrUrl">
            </select>
        </div>
        <div class="col-sm-8">
        <input type="url" class="form-control col-sm-8 invalidInput">
        </div>
    </div>

Solution 2

You can use form-inline for creating inline forms,

<form class="form-inline" role="form">
  <div ng-repeat="param in plugin.wsdlURLs track by $index">
    <select class="form-control" ng-model="test" ng-options="lOrU for lOrU in localOrUrl">
    </select>
    <input type="url" class="form-control invalidInput">
</div>
    </form>

Here is the fiddle http://jsfiddle.net/aNWx3/ , expand the output windows to show proper output.

When you use form-inline, the controls become left-aligned and inline-block.

I have changed the code since you had lots of nested grid classes. For defining proper width to each element you can assigne a div over each input element and specify width in terms of col-sm-x .