[Input] Dropdown and input heights do not match in a form

[cbxp]

See example in http://semantic-ui.com/collections/form.html#form, Billing Information: CVC and Expiration fields are next to each other and Expiration is ~1px higher.

We think this bug came with version 2.2

[jlukic]

It appears to be 1px off as stated

[jlukic]

After spending 30 minutes puttering around on this and changing tons of rules, I found the final solve to be extremely simple.

The global @inputLineHeight setting in the default them does not have enough decimals represented to round exactly. I've changed it to to its fractional representation (17/14)

[amscher]

I'm pretty sure this is still a problem, or at least I'm still dealing with it. See updated fiddle here, using CDN for css: http://jsfiddle.net/rxjfnkwj/

I believe the problem has to do with the fact that dropdowns and buttons have text inside them which establish the line height. The height then responds to the line height + padding. Whereas for the input, there is just the placeholder text, and the total height doesn't change as you increase the padding or the line height... at least when I inspect the element and adjust the line height, nothing changes, but the total height DOES change when I adjust the padding.

So, I went about trying to change both @inputPadding in site.variables and @padding in input.variables, but I can't seem to get those changes to affect the final input padding...

[amscher]

I was able to adjust the padding for form inputs in form.variables by doing...
@inputPadding: (@inputVerticalPadding + (1em / 2)) @inputHorizontalPadding;

That seemed to fix the issue for inputs that were contained inside forms.