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!

wisew · Accepted Answer · 2012-07-11 01:35:06Z

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.

answered Jul 11, 2012 at 1:35

wisew

2,9224 gold badges25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related