Skip to content

Mismatched height of input-group append/prepend elements in horizontal forms #27505

@b-nik

Description

@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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions