Question

I’ve upgraded my bootstrap version to 2.0.2 and with this update the design of my input-append / add-on construct is broken.

Fiddle: http://jsfiddle.net/AACwG/

The Changelog for 2.0.2 says:

Removed all IE7 hacks and floats from .input-prepend and
.input-append, however, this requires you to ensure there is no
whitespace in your code between .add-on and the input. In
.input-prepend and .input-append, added ability to use add-ons on both
sides when you chain the selectors.

I used the bootstrap example for input-append. it’s the code from github. any idea why it’s not working?

according to one of the bootstrap dev’s the problem is in 2.0.2-wip resolved, but i don’t see the solution.

Answer 1

It is broken because the input groups only work within the context of a form. You can see that when you look at the css for the .controls class, e.g.:

.form-horizontal .controls {
    margin-left: 160px;
}

You can fake that constraint by adding in your class instead of the .form-horizontal class or simply including your control group inside its proper container, like so:

<form class="form-horizontal">
    <div class="control-group">
        <label for="appendedInput" class="control-label">Appended text</label>
        <div class="controls">
            <div class="input-append">
                <input type="text" size="16" id="appendedInput" class="span2"><span class="add-on">.00</span>
            </div>
            <span class="help-inline">Here's more help text</span>
        </div>
    </div>
</form>

Fixed fiddle: http://jsfiddle.net/AACwG/2/