Text inputs inside checkbox/radio labels are misaligned

[ryanflorence]

I just dropped this onto the bootstrap website, you can see from the image its all messed up. Same for form-inline as well.

<label class="checkbox">
  <input type="checkbox"> Check me out <input type="text" style="width: 25px"> times
</label>

[mdo]

First, I'd avoid placing two different inputs within a single label. Seems like a bad idea given tap targets, event association, and what not.

Second, we can't always provide support for every combination of elements. It'd be super difficult to fix this for everyone without adding additional classes. That's just extra overhead that most folks likely won't need.

For now, go ahead and tweak this on your own as needed. You should just need to set a higher top margin on the checkbox and perhaps remove the bottom margin on the text input. Worth noting v3 handles this much better.

[ryanflorence]

I opened this issue when I was knee deep in some grizzly old code that we've dropped bootstrap onto, so I wasn't thinking straight. Then I left town.

I was going to close the issue as soon as I was online again for the same reason :)

[caiofbpa]

I agree that the checkbox example is nonsense, but this one is very common in forms and has the same problem:

  <label class="radio">
      <input type="radio" name="user_choice" value="other">
      Other: <input type="text" name="other_text">
  </label>

What do you guys think? I can place the text field right below the radio button, but the inlining is quite commonly seen in questionnaires for example.

[mix3d]

in case anyone else stumbles upon this issue, you can use the following css to make it work inline, with Bootstrap 3

.inline-radio label{vertical-align: middle}
.inline-radio input[type=text]{width: 40%;display:inline-block;}

    <div class="radio">
        <label>
            <input type="radio" id="radio-undetectable" name="value" value="-1">
            Radio Value 1
        </label>
    </div>

    <div class="radio inline-radio">
        <label>
            <input type="radio" id="radio-value" name="value" value="value1">
        </label>
        Other: 
        <input id="result-value" class="form-control" name="value" type="text" value="I'm inline" />
        <span style="line-height:34px">copies/ml</span>
    </div>

http://jsfiddle.net/0nqy38ge/