.form-group-lg, .form-group-sm <label> has wrong line-height #16824

Closed
adamhooper opened this Issue Jul 14, 2015 · 0 comments

Projects

None yet

3 participants

@adamhooper

The labels in the sample at http://getbootstrap.com/css/#horizontal-form-group-sizes don't line up vertically. (Neither do the labels I add to my app.)

For posterity's sake, I'll copy/paste the example HTML:

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

The label.col-sm-2.control-label inherits the body line-height, 1.42857143.

The input has line-height 1.5.

And sure enough, the label is a pixel higher than the input.

As for the form-group-lg: the error is much more pronounced. That's probably why the control-label has padding-top @padding-large-vertical * @line-height-large + 1, which randomly seems about correct. (Otherwise it would be simply @padding-large-vertical + 1, or it would have a comment.)

Fix:

  • .form-group-lg .control-label { line-height: @line-height-large; padding-top: (@padding-large-vertical + 1); }
  • .form-group-sm .control-label { line-height: @line-height-small; }

... I'm not 100% sure of myself here, hence the lack of pull request. But I'm pretty sure. Anyway, the example at http://getbootstrap.com/css/#horizontal-form-group-sizes is certainly misaligned.

@cvrebert cvrebert added the css label Jul 15, 2015
@mdo mdo added this to the v3.3.6 milestone Aug 5, 2015
@mdo mdo referenced this issue Aug 5, 2015
Closed

v3.3.6 ship list #16644

@mdo mdo closed this in 709a077 Aug 5, 2015
@kkirsche kkirsche referenced this issue in elastic/kibana Feb 21, 2016
Merged

Update Bootstrap to 3.3.6 #6294

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment