.form-control-static isn't the same height as .form-control

[tompazourek]

In Bootstrap 4 Alpha 4 the form-control-static isn't the same size as form-control.

See example:
http://v4-alpha.getbootstrap.com/components/forms/#static-controls

• The form-control-static element's height is 24 pixels plus 8 pixels vertical padding making 40 pixels of height.
• The form-control element's height is 20 pixels plus 8 pixels vertical padding plus 1 pixel border making 38 pixels of height.

The issue is that if I use form-control-static and form-control side by side (like in multi-column form layout), the result will not be aligned nicely.

In v3, the form-control-static and form-control were both the same height.

---

I'm using Chrome 53 right now.

[knkhere]

Hi, @tompazourek I tried replicating the condition you mentioned to the best of my understanding and could find a problem as to the alignment in case of a multi-column form.
The result I obtained was aligned incorrectly on all browsers I checked, namely: Chrome 53, Edge 20, Internet Explorer 11.

You can see example for further info: http://codepen.io/knk-here/pen/BLLBRE

At first I thought using the p tag along with form-control-static was causing the problem, so I modified it to a anchor tag. Say, you wanna use it with a link.

That definitely worsens the issue. 26px vs 40px, across all the above mentioned browsers.

[twbs-lmvtfy]

Hi @knkhere!

You appear to have posted a live example (http://codepen.io/knk-here/pen/BLLBRE.html), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 33, column 35 thru column 42: Stray end tag input.
• line 39, column 7 thru column 93: Duplicate ID inputPassword.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[tompazourek]

@knkhere: I always use the form-control-static on a plain div tag to ensure it's not conflicting with styles specific to a or p tag.

What I had in mind was something like this: http://codepen.io/tompazourek/pen/XjjpqP (you can see that due to different heights the alignments are wrong). Of course to maintain alignment, I could just make a new row for each row of the form, but still they should be the same height, otherwise form-control-static loses its purpose.

Also note that the difference isn't 26px vs 40px, but rather 38px vs 40px. The issue in your case was that you were using the a tag, which is inline, which means that not all form-control-static styles apply.

[PlippiePlop]

Its because the min-height and line-height. Set min-height:auto;line-height:normal;
See pen: http://codepen.io/anon/pen/wzowAO