Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

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

adamhooper opened this issue Jul 14, 2015 · 0 comments
Labels
Milestone

Comments

@adamhooper
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants