ruby on rails using bootstrap - prepend text and append button to an input field in a form

Question

I am using bootstrap-sass 2.0.0 in my gemfile, but I am having trouble getting both prepended and appended content added to an input tag in a form to work.

I got on FireBug with FireFox and copied the exact html that they use for the example on the twitter bootstrap site, copied here:

div class="control-group">
  <label class="control-label" for="appendedPrependedInput">Append and prepend</label>
  <div class="controls">
    <div class="input-prepend input-append">
      <span class="add-on">$</span>
      <input id="appendedPrependedInput" class="span2" type="text" size="16">
      <span class="add-on">.00</span>
    </div>
  </div>
</div>

But I get the prepended text facing the wrong way (it looks like the appended tag) so it kind of looks like this: [span)[.....input....][span) instead of this: (span][.....input.....][span) .

Also appended buttons do not register as being appended (also with copied code from the example) like so: (....input....) (button) instead of (....input.....][button)

Any ideas on how I can get to this: (span][....input....][button) ? I already tried the code below:

<form class="form-inline">
  <div class="control-group">
    <div class="controls">
      <div class="input-prepend input-append">
        <span class="add-on">Search</span>
        <input id="search" class="input-xlarge" type="text" size="16">
        <button class="btn" type="button">Go!</button>
      </div>
    </div>
  </div>
</form>

I appreciate any and all help!

Answer 1

You have the right idea, you just have to put everything that is either to be appended/prepended or have something appended/prepended to it on one line with no spaces.

Like this:

<form class="form-inline">
  <div class="control-group">
    <div class="controls">
      <div class="input-prepend input-append">
        <span class="add-on">Search</span><input id="search" class="input-xlarge" type="text" size="16"><button class="btn" type="button">Go!</button>
      </div>
    </div>
  </div>
</form>

I tested this on my own Bootstrap setup and it displays properly.