My bootstrap form has two un-clickable inputs, can't figure out why - css

Question

I have a bootstrap 3 form.
when its in the tabled and larger media query state, the middle input field is somehow overlaying the two inputs above making them none clickable jsfiddle.net/wT7gp/.
I have put an example in jsfiddle. (remember to make it wide enough to see the problem)
Repro:
Open link.
make the outwindow large.
click the input for firstname.
Expected it to start typing state, but nothing happens.
Hope someone here can explan what I did to cause it :) I failed at finding the issue. (other then yes the middle element is overlaying the two others.

Answer 1

You should be wrapping your rows of form groups in div with row class like so:
Fiddle: http://jsfiddle.net/wT7gp/1/
HTML
<div class="row">
<div class="form-group col-sm-6">
<input class="form-control input-lg " placeholder="First Name" id="first-name" tabindex="1" name="FirstName" data-bind="value: firstName" type="text" maxlength="50" />
<label for="first-name" style="display:none;" data-bind="validationMessage: firstName, css: { error: !firstName.isValid() }" class="error"></label>
</div>
<div class=" form-group col-sm-6">
<input class="form-control input-lg " placeholder="Last Name" id="last-name" tabindex="2" name="LastName" data-bind="value: lastName" type="text" maxlength="50" />
<label for="last-name" style="display:none;" data-bind="validationMessage: lastName, css: { error: !lastName.isValid() }" class="error"></label>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<input class="form-control input-lg " placeholder="Email" id="email" tabindex="3" name="Email" data-bind="value: email" type="email" maxlength="50" />
<label for="email" style="display:none;" data-bind="validationMessage: email, css: { error: !email.isValid() }" class="error"></label>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control input-lg " placeholder="Choose a password" id="password1" tabindex="4" name="Password" data-bind="value: password" type="password" />
<label for="#Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: password , css: { error: !password.isValid() }" class="error"></label>
</div>
<div class="col-sm-6 form-group">
<input class="form-control input-lg " placeholder="password, again" id="password2" tabindex="5" name="ConfirmPassword" data-bind="value: confirmPassword" type="password" />
<label for="#Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: confirmPassword , css: { error: !confirmPassword.isValid() }" class="error"></label>
</div>
</div>

Answer 2

I had the same problem. It was caused by a div covering my input controls. It seemed the div 'knew no bounds'.
So when I worked out which div was causing the problem I applied the overflow:hidden; style.
I'm guessing that's why the row class worked for Kevin Pei - maybe it keeps the col divs contained.
Aside: I used Firefox Firebug to show me which div was covering my controls.

Answer 3

We had a very similar problem within our web application. Using bootstrap 3.3.7 our signup form did not work any more on iPhones. The initial form looked like this:
<form ...>
<div class="col-xs-12 col-sm-6">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-sm-6 col-md-8">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-sm-6 col-md-4">
<input type="submit" value="Register">
</div>
</form>
The problem was caused by the last two div elements which did not have corresponding class definitions for the xs-size. So on iPhone the <div class="col-sm-6 col-md-4"> class resulted in a very big div overlaying the whole form and preventing touch events for input fields beneath the div.
The solution is simply adding a xs-size class to the div and everything worked well on iPhones. In our case we adjusted the form like that:
<div class="col-xs-12 col-sm-6 col-md-8">
<div class="form-group string required">
<input ...>
</div>
</div>

Answer 4

In my case i set z-index:1 for the controls not allowing inputs and no z-index setting for the controls allowing inputs.