Bootstrap: Mismatched height of input-group append/prepend elements in horizontal forms

[b-nik]

Hello!

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)

[alecpl]

Confirmed. I think setting height will not be an acceptable solution, but this also works:

.input-group {
  align-self: flex-start;
}

[mdo]

Hmm, sounds like this might've been related to the height I added to inputs awhile back. May need height: auto in the input groups.

[alecpl]

@mdo, I don't think it's related, and height: auto does not fix it.

[b-nik]

Well, the input-group-lg/sm that _do_ seem to fix it both add a height ($input-height-lg/sm) to the input, that's how I thought to try adding $input-height to the base input-group class.

[alecpl]

@b-nik, just note that input-group is not only for inputs, it can contain e.g. a textarea or multi-line button. So, the fact that input-group-lg/sm sets the height of the form control inside is another bug, imo. It should use height: auto for textareas.

[b-nik]

The problem doesn't exist in 4.1.2.

However in 4.1.2 the input grows which I'm not sure about visually:
https://jsbin.com/nahabanosi/edit?html,output

[florianlacreuse]

Is it right to have col-sm-9 and input-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

[b-nik]

Thanks, @florianlacreuse that actually worked :)

[florianlacreuse]

Good to hear.

@mdo @b-nik @alecpl Should this issue be closed or do we consider that there is still a bug somehow here?

[MartijnCuppens]

Nope, the solution you provided is the way this should be fixed, thanks for the effort you put into this @florianlacreuse!

[arunelias]

When using Prepend and Append in Input Groups, Alignment issue is occurring. Issue occurs when an Image is used in Append and Image height is more than 24px. PFA Screenshot

Issue does not occur in Bootstrap v4.0.0

Issue occurs on latest version v4.3.1

• Operating system and version: Windows 10 Pro 64-bit
• Browser and version: Chrome Version 73.0.3683.103 (64-bit) / Firefox 66.0.3 64-bit
• JSFiddle: https://jsfiddle.net/fnasg6te/

[MoniotJ]

Thanks for that solution @florianlacreuse ! :D

It fixed it perfectly !