Geek asks and answers

How can I use .input-append with .form-inline?

I'm new to Twitter Bootstrap, and I'm starting to wave my way through using it. Although some aspects of the structure are starting to make sense, I am still struggling with the style of form. I am trying to customize several different sections of the form that will have elements that are used in the style .form-inline. In one such case, I am also trying to use .input-appendwith little luck.

<div class="row">
    <div class="well span12">
        <div class="row">
            <div class="span12 form-inline input-append">
                <label for="assetSearch">Asset Search</label>
                <input type="search" id="assetSearch" placeholder="">
                <span class="add-on"><i class="icon-search"></i></span>
            </div>
        </div>
        <div class="row">
            <div class="span12 form-inline">
                <label for="service">Service</label>
                <input type="text" id="service" autocomplete="off" />
            </div>
        </div>
    </div>
</div>

The above markup is as follows:

screenshot of how the above markup renders

As you can see, Asset Search is not built-in with the input of the form. If I remove the class .input-appendfrom the div line containing the div. However, the search icon is no longer inserted into the text box, but instead to the right of the text box.

.form-inline cunjunction .input-append?

+5
2

input-append ( ) - , input s, button .add-on ( ).

div.input-append .form-inline : Demo on jsfiddle

<div class="span12 form-inline">
    <label for="assetSearch">Asset Search</label>
    <div class="input-append">
        <input type="search" id="assetSearch" placeholder="" />
        <span class="add-on"><i class="icon-search"></i></span>
    </div>
</div>
+1

: http://jsfiddle.net/Jeff_Meadows/xGRtL/

vertical-align <label> .input-append, reset font-size - 14px ( 0 ). , .input-append, , . , .

.input-prepend label, .input-append label {
    vertical-align: middle;
}
.fix-text-spacing {
    font-size: 14px;
}
0

More articles:


All Articles