CODEWITHSUNDEEP
responsive-designtwitter-bootstrap-3
Neil Cresswell
Neil Cresswell

Reputation: 1165

Twitter Bootstrap 3 - Nested Form-Horizontal Responsive Design Issue

I have a number of Twitter Bootstrap 3 form-horizontal style forms that are nested in columns on various pages. Generally, when there is enough room for the labels and inputs to appear side-by-side, then they do so, else the label appears above the input. All well and good, and as expected and desired.

However, when there is not much width available to start with for the form, say the form is inside an outer columns that's 3 of 12 wide using the Bootstrap 12 column grid system, I'm seeing the labels being cut off and disappearing underneath the inputs instead of seeing the labels moving above the inputs. To clarify, if the labels were above then there would be enough width in the form for everything to be visible.

You can see a simplified example of this occurring here, which uses the form-horizontal example found in the Twitter Bootstrap 3 documentation: http://jsfiddle.net/BF4ZK/

In the example shown above, the "Email" and "Password" labels are truncated instead of moving above the inputs. The code for this is as follows:

<!DOCTYPE html><html lang="en">
<head>
    <meta name="viewport"  content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"       href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script                type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
    <script                type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">

            <!-- always have two side-by-side columns -->
            <div class="col-xs-3">

                <!-- place a form in the left column - exact copy from Bootstrap official example of form-horizontal -->
                <form class="form-horizontal" role="form">
                  <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-10">
                      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <div class="checkbox">
                        <label>
                          <input type="checkbox"> Remember me
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-default">Sign in</button>
                    </div>
                  </div>
                </form>        

            </div>

            <div class="col-xs-9">
                3 col to left, 9 col to right.
            </div>

        </div>
    </div>
</body>

If the form in this example were moved to be in the 9 column section on the right of the page instead of the smaller 3 column section on the left of the page then it would behave responsively as expected and would typically display side-by-side or move above if there is not enough room. I've tried a lot of variations including multiple col-xs, col-sm, col-md, col-lg and even rolling my own solution without form-horizontal and label controls, adding rows around the form, changing Bootstraps max widths, and so on. Things seem to be fairly consistent in that the form acts responsively as expected if it lives in a wider section of the page.

Has anyone encountered this before or know of a solution? This appears to be a Twitter Bootstrap 3 bug but I may be doing something incorrectly so would welcome any corrections. I have a workaround that forces form-horizontals to always be vertical but I'd really like to get form-horizontal working the way it is intended in Twitter Bootstrap.

Many thanks in advance for any feedback.

Upvotes: 1

Views: 3951

Answers (1)

moodyjive
moodyjive

Reputation: 1807

Anytime you nest a column within another column, you must have that wrapped with a NEW row:

<div class="col-xs-3">
<!-- place a form in the left column - exact copy from Bootstrap official example of form-horizontal -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="row">
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">

Once I added that, the labels and form fields stacked.

Upvotes: 1

Related Questions