checkbox and radio spacing problem

[rgbskills]

some spacing issues with the radio and checkbox inputs. First i thought that my markup's wrong but theirs some extra margin on them. (I was using master branch, installed bootstrap with bower), Let me know if i can give more info to help this get fixed.

[rgbskills]

Here is my fix:

old:
.radio, .checkbox {
display: block;
min-height: 20px;
margin-top: 10px;
margin-bottom: 10px;
}

New:
.radio, .checkbox {
height: 20px;
}

[cvrebert]

Please post a JS Fiddle demonstrating the problem.

[drakej]

Compile bootstrap with @font-size-base set to anything besides 14px (default) and it's immediately apparent that the margin set for the input tag is arbitrary and probably got hard coded around the assumption of a 14px font size. The margin always get's set to 4px at the top which is why the radio buttons and the checkboxes don't align properly.

[rgbskills]

I did use a different font, but I did not change the default typography.

[mdo]

Still, we need a jsbin or example link.

[rgbskills]

Here is a jsfiddle: http://jsfiddle.net/halirgb/dWqyK/ Let me know if theirs anything else i can help with this issue.

[cvrebert]

Change:

    <label for="radios-0">
      <input type="radio" name="radios" id="radios-0" value="1" checked="checked">
      Option one
    </label>

To:

    <label for="radios-0">
      <input type="radio" name="radios" id="radios-0" value="1" checked="checked">
      Option one</label>

Etc.

i.e. Remove the extra linebreaks within the <label>s.

Fixed example: http://jsfiddle.net/dWqyK/3/

Not really sure why that fixes it though.

[rgbskills]

I have experienced something similar with input-group's in BS 2.x.x (you head to put the input right after the input-group-addon) otherwise ther would be a 1px white space between the addon and input field, Weird,,

http://jsfiddle.net/halirgb/dWqyK/4/ The fix works, Thank you!

[cvrebert]

Reopening for investigation (and documentation if necessary). Confirmed that the spacing weirdness happens in Chrome but not in Firefox.
CC: @mdo

[ItsJonQ]

Heya,

This is a strange issue. For what it's worth.. if you add display: block to .radio label / .checkbox label it fixes the issue in Chrome. Don't know if that's ideal though.

Hope this helps!

[CyborgMaster]

This appears to be a breaking change in master.

In 3.1.1, the less for checkbox labels was:

.radio,
.checkbox {
  display: block;
  min-height: @line-height-computed; // clear the floating input if there is no label text
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  label {
    display: inline;
    font-weight: normal;
    cursor: pointer;
  }
}

on master it is now:

.radio,
.checkbox {
  display: block;
  min-height: @line-height-computed; // clear the floating input if there is no label text
  margin-top: 10px;
  margin-bottom: 10px;

  label {
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
  }
}

The crucial display: inline; was removed in master. Display inline seems to cause the label to ignore whitespace, while inline-block is counting the newlines, which is why removing the line breaks was working for @cvrebert.

I motion to put display: inline; back.

[cvrebert]

The display: inline was removed in a83ca38.

[CyborgMaster]

@cvrebert, are you just providing that for info, or is there a reason for the removal that I don't understand?

[cvrebert]

For context, to help this issue get debugged without re-breaking the older issue.

[zzullick]

This has been driving me nuts for a few days because I wasn't experiencing the same issue with the latest 3.1.1 zip package. Glad to see it wasn't only me noticing this.

How I fixed it for now:

.radio,
.checkbox {
    padding-left: 20px;
}
.radio label,
.checkbox label {
    display: inline;
    padding: 0;
}