0

I am trying to get an input-group styled properly in Bootstrap 3 with a drop-down selector, using this sample code:

<div class="form-group">
  <div class="input-group">
    <span class="input-group-btn">
      <select class="btn">
        <option>USD</option>
        <option>GBP</option>
        <option>ZAR</option>
      </select>
    </span>
    <input type="text" class="form-control">
    <span class="input-group-btn">
      <div class="btn btn-default" type="button">Button</div>
    </span>
  </div>
</div>

It works fine in Bootply (http://www.bootply.com/ZVSunDnXif):

Input group working

but if I put it into my site (ASP.Net Web Forms) using exactly the same code, it breaks:

Bootstrap 3.1.1 broken input group

I wouldn't mind so much (in vanilla bootstrap it's only lacking the border around the select box), except that I'm using a Bootswatch themed version, which doesn't even align properly:

Bootswatch 3.1.1. broken input group

The css path to the input group is body > form > div #MainBody > div.row > div.col-md-9 > div.form-group.

If I remove the select element, it displays fine, so is there something wrong with how I've defined that?

rudivonstaden
  • 7,675
  • 5
  • 26
  • 41
  • I see now that Bootstrap [recommends against](http://getbootstrap.com/components/#input-groups) using select elements in an input group as they cannot be fully styled by WebKit browsers. I have used inline forms instead. – rudivonstaden May 30 '14 at 10:09

1 Answers1

-1

try adding row class to the form-group div parent of the select element. My select element was breaking the form div and going into another row. Adding the row class kept it inside visually although it is still going outside the html form tag. I am going to post about that separately.

RGB
  • 31
  • 1
  • 6