Clever Geek Handbook

Bootstrap 2.0.2 - typing-adding spaces

I have updated my bootstrap version to 2.0.2 and with this update my input-add / add-in design breaks.

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

Changelog for 2.0.2 says:

Removed all IE7 hacks and floats with .input-prepend and .input-append, however this requires you not to have a space in your code between .add-on and input. In .input-prepend and .input-append, added the ability to use add-ons on both when chaining selectors.

I used bootstrap example for input-add. this is the code from github. any idea why it doesn't work?

according to one of the boot files, the problem is resolved in version 2.0.2-wip, but I don't see a solution.

+3


source to share


2 answers


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

like:

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

You can fake this restriction by adding to your class instead of the class, .form-horizontal

or simply including your cgroup in your own container, for example:



<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 more help text</span>
        </div>
    </div>
</form>

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

+4


source


For me, the fix was to remove the added margin-right on the input, which interfered with other stylesheets in the framework in use (web2py).



<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" style="margin-right: 0px"><span class="add-on">.00</span>
                </div>
                <span class="help-inline">Here more help text</span>
            </div>
        </div>
    </form>
0


source






More articles:


All Articles