Question

I am trying to create a form with a date drop down field and have it displayed nicely inline. The field is fine without using input-append but has trouble when i do-

This is the code

<div class="control-group">
            <label class="control-label" for="title">
                <a data-toggle="collapse" data-target="#collapse_date">
                    Add a date
                </a>
            </label>
            <div id="collapse_date" class="controls collapse input-append date form_datetime" data-date="2013-09-16T05:25:07Z" data-date-format="dd MM yyyy - hh:ii" data-link-field="dtp_input1" >

                    <input size="16" type="text" value="" readonly><span class="add-on"><i class="icon-th"></i></span>

            </div>
        </div>

This is the result.

As you can see the input field is align to the right for some reason- Im using stand boostrap here apart from the colors. Maybe someone with deeper knowledge of boostrap could point out where i am going wrong?

Answer 1

Your .controls div and .input-append div are the same div. Try removing the input-append class from that div and wrapping the input and span inside of a div whose only class is input-append.