Bootstrap: Floating label example has misaligned label due to change of height of inputs

[Ruffio]

I was thinking of using the floating label on my website, but it appears to have been changed :-(

4.0 (https://getbootstrap.com/docs/4.0/examples/floating-labels/):

4.1 (https://getbootstrap.com/docs/4.1/examples/floating-labels/):

Actually I think that the changes happened when 4.1.3 was released and a fixed height of 38px was introduced as it goes from 50px (calculated) to 38px (set):

[mdo]

Thanks!

To recap the other issue, this is because we added fixed height to .form-control in v4.1.3. Will need to override it here.

[Ruffio]

Keeping the standard 38px for input heights, I have come to that these adjustments work nicely:

and:

That results to:

and:

Use it for inspiration :-)

Please also consider to support/implement floating label for textarea. If 'expanding' the css to also cover textarea, the alignment with the above values are a little bit off, but only a little:

[fessor10]

How do we get back the 50px (calculated) for floating labels?

[Ruffio]

Ideally we shouldn't require a fixed/specific height but the code should adjust accordingly to the height of the input/textarea

[fessor10]

Yeah, i removed the height entirely and got what i wanted. I think i agree with you about not having fixed/specific height

[mdo]

See the PR where we added the height for why: #26820. We need to account for it here by providing a new height.

[Ruffio]

@mdo will the fix/adjustment be a part of 4.2?