Select List with the width of the form in Bootstrap

Question

I'm doing an application with Rails and AngularJS which have a form with a select list, the problem it's that it looks pretty ugly, because the width is too large for the options it have.

Here's my form with some sample values

How can I shorten the width of the select list without distorting the rest of the form?

Here's the code of my form

<h1>Create Form</h1>

<form ng-submit="addPoll()" style="margin-top:30px;">

  <div class="form-group">
    <label>Title</label>
    <input type="text" class="form-control" ng-model="title"></input>
  </div>

  <div class="form-group">
    <label>Description</label>
    <textarea type="text" class="form-control" ng-model="description"></textarea>
  </div>

  <div class="form-group">
    <label>Group</label>
    <select class="form-control" ng-model="data.groupSelect">
      <option ng-repeat="group in data.groups" value="{{group.id}}" >{{group.name}}</option>
    </select>
  </div>

  <div class="form-group">
    <label>Welcome Message</label>
    <textarea type="text" class="form-control" ng-model="initial_message"></textarea>
  </div>

  <div class="form-group">
    <label>Outgoing Message</label>
    <textarea type="text" class="form-control" ng-model="final_message"></textarea>
  </div>

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="allow_anonymous_answer"> Allow Anonymous Answer
    </label>
  </div>

  <button type="submit" class="btn btn-primary" style="float: right;">Continue</button>

</form>

You can find the answer here: http://stackoverflow.com/questions/18539711/input-widths-on-bootstrap-3 — semperfids, Jan 29 '16 at 19:44

score 0 · Accepted Answer · answered Jan 29 '16 at 19:47

You can do it a few different ways. You can either add an inline style to the div.form-group or use Bootstrap's grid system. Here's two examples:

<div class="form-group" , style="width: 200px">
  <label>Group</label>
  <select class="form-control" ng-model="data.groupSelect">
    <option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
  </select>
</div>

<div class="row">
  <div class="col-sm-3">
    <div class="form-group">
      <label>Group</label>
      <select class="form-control" ng-model="data.groupSelect">
        <option ng-repeat="group in data.groups" value="{{group.id}}">{{group.name}}</option>
      </select>
    </div>
  </div>
</div>

JSFiddle

Select List with the width of the form in Bootstrap

1 Answers1