Twitter bootstrap form-horizontal inside a modal

twitter-bootstrap

Solution

My working code:

<div id="deleteGroupForm" class="modal hide fade in">
    <form method="POST" action="${home}/administrator/groups" class="non-margined">
        <input type="hidden" name="_method" value="DELETE" />
        <input type="hidden" class="id-holder" name="id" value="" />
        <div class="modal-header">
            <button type='button' class='close' data-dismiss='modal'>×</button>
            <h3><spring:message code="delete" /></h3>
        </div>
        <div class="modal-body form-horizontal">
            <p><spring:message code="delete.confirmation" /></p>
            <div class="alert">
                <strong><spring:message code="warning" />!</strong>&nbsp;<spring:message code="group.delete.warn" />
            </div>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal"><spring:message code="cancel" /></a>
            <input class="btn btn-danger" type="submit" value="<spring:message code="delete" />" />
        </div>
    </form>
</div>

Problem

I've trying to create a form inside a bootstrap modal with labels displayed inline. I've applied the form-horizontal styles, which outside of the modal display the form correctly, with the labels right aligned to fields. However, I can't get this style to work inside the modal. The labels always appear above the fields. How can I get the labels to appear next to the labels inside the modal? ``` <div id="editModal" class="modal edit-modal hide fade in" style="display: none; "> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h4>Edit interlining</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="nameInput">Name</label> <div class="controls"> <input id="nameInput" type="text" value="Interlining A"> </div> </div> <div class="control-group"> <label class="control-label" for="widthInput">Width</label> <div class="controls"> <input id="widthInput" type="text" value="130"> </div> </div> <div class="control-group"> <label class="control-label" for="patternInput">Pattern Repeat</label> <div class="controls"> <input id="patternInput" type="text" value="70"> </div> </div> <div class="control-group"> <label class="control-label">Price</label> <div class="controls"> <div class="input-prepend"> <span class="add-on">£</span> <input id="priceinput" name="priceinput" class="span2" placeholder="" type="text" required="" value="90.02"> </div> </div> </div> </form> </div> </div> <div class="modal-footer"> <a href="/admin/fabricsave/3" class="btn btn-primary">Save</a> <a href="#" class="btn" data-dismiss="modal">Cancel</a> </div> ```

Original source

Related problems