Question

The following code example code should result in something like .

<form class="well form-search">
  <div class="pull-right">
    <div class="input-prepend">
      <span class="add-on">
        <i class="icon-search"></i>
      </span>
      <input type="text" class="input-large search-query" />
    </div>
    <button class="btn" type="submit">Search</button>
  </div>
</form>

This works perfectly well in Firefox, but in both Chrome and Internet Explorer 7 browsers, it looks like the following:

Am I doing something “illegal” with bootstrap? I did not make any adaptions yet so it’s completely out-of-the-box.

Any help is greatly appreciated!

Answer 1

This was a reported issue: https://github.com/twitter/bootstrap/issues/1362

The fix outlined by tonybolzan in the issue works best because you don’t have explicitly set a width:

.input-prepend, .input-append {
    white-space: nowrap;
    -webkit-padding-end: 27px;
}