Mismatched height of input-group append/prepend elements in horizontal forms
See original GitHub issueHello!
There seems to be a problem with input-groups in horizontal forms. Namely, If the form-group gets bigger (due to the label being long for example) the append/prepend elements follow the form-group size, while the input itself stays the same. This results in the append/prepend elements not matching their input size.
Reduced Test case: https://jsbin.com/pidudozuku/edit?html,output Suggested Fix: The simplest solution to me seems to be:
.input-group {
height: $input-height;
}
Here’s the above in jsbin (with input-height hardcoded): https://jsbin.com/moqojozega/edit?html,output
Also adding either input-group-sm/input-group-lg prevents the problem for happening, but of course it changes the size of the input so it’s not an ideal solution.
Operating System: Ubuntu 16.04 Tested On: Firefox, Opera, Chromium (latest versions)
Issue Analytics
- State:
- Created 5 years ago
- Comments:12 (7 by maintainers)
Top GitHub Comments
Is it right to have
col-sm-9
andinput-group
at the same level, side by side in the same class attribut?See horizonral form doc:
div
blocks wrapping input, checkbox, etc. have only one css class,.col*
.Reduced test case fixed: https://jsbin.com/vuletujofo/1/edit?html,output
Nope, the solution you provided is the way this should be fixed, thanks for the effort you put into this @florianlacreuse!