Multi column forms with fieldsets

forms, twitter-bootstrap-3

Solution

There are a couple of things that need to be adjusted in your layout:

You are nesting `col` elements within `form-group` elements. This should be the other way around (the `form-group` should be within the `col-sm-xx` element).

You should always use a `row` div for each new "row" in your design. In your case, you would need at least 5 rows (Username, Password and co, Title/First/Last name, email, Language). Otherwise, your problematic `.col-sm-12` is still on the same row with the above 3 `.col-sm-4` resulting in a total of columns greater than 12, and causing the overlap problem.

Here is a fixed demo.

And an excerpt of what the problematic section HTML should become:

<fieldset>
    <legend>Personal Information</legend>
    <div class='row'>
        <div class='col-sm-4'>    
            <div class='form-group'>
                <label for="user_title">Title</label>
                <input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
            </div>
        </div>
        <div class='col-sm-4'>
            <div class='form-group'>
                <label for="user_firstname">First name</label>
                <input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
            </div>
        </div>
        <div class='col-sm-4'>
            <div class='form-group'>
                <label for="user_lastname">Last name</label>
                <input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
    <div class='row'>
        <div class='col-sm-12'>
            <div class='form-group'>

                <label for="user_email">Email</label>
                <input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
</fieldset>

Problem

Sorry for the vague title, I wasn't sure how to describe it better. I'm currently upgrading a website to bootstrap 3 and got a little problem with multiple inputs in one form row. In bootstrap 2, I would have simply created two `.controls.controls-row` with `.spanX` elements inside to create the necessary columns. However, as these are removed in bootstrap 3, I replaced them with `.form-group` and the new column classes. If I have two rows inside the form (resp. fieldset in this case), the first one becomes non-editable if the second one is a one-column row (see code and attached screenshot below). I inspected the elements with firebug and saw that the `.col-sm-12` from the second fieldset lays over the `.form-group` and does not let the user click the elements inside. In the first fieldset with the `.col-sm-12` first, everything works fine. I also tried placing a `.row` around each `.form-group` which solves the issue, but increases the width of the form line, so it does no longer has a left margin inside the fieldset. Is there a way to solve this without increasing the form-row width? EDIT: I added the generated code as a jsFiddle ``` %fieldset %legend= t('.login_information') .form-group .col-sm-12 = f.label :login = f.text_field :login, :class => 'form-control', :required => true .form-group .col-sm-6 = f.label :password = f.password_field :password, :class => 'form-control' .col-sm-6 = f.label :password_confirmation = f.password_field :password_confirmation, :class => 'form-control' %fieldset %legend= t('.personal_details') .form-group .col-sm-4 = f.label :title = f.text_field :title, :class => 'form-control' .col-sm-4 = f.label :firstname = f.text_field :firstname, :class => 'form-control', :required => true .col-sm-4 = f.label :lastname = f.text_field :lastname, :class => 'form-control', :required => true .form-group .col-sm-12 = f.label :email = f.text_field :email, :class => 'form-control email', :required => true ```

Original source