Floating Label: position is not correctly aligned

[Alken0]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

I saw that the labels of Floating-Label are not perfectly aligned while first messing around with incorrect ellipsis on 5.3 (which has ben fixed according to other issues).

This is a screenshot of the website of version 5.2 (to have a correct version):

I would suggest a change to display the label with a better alignmend to the sides:

Reduced test cases

The problem, why this occurs is in the following css-attribute:

.form-floating>.form-select~label
transform: scale(.85) translateY(-.5rem) translateX(.15rem)

The scale factor reduces the size that was 100% before the transform. Therefore the real width is 100%*0.85 instead of 100%.

In addition, the alignment is not perfect regarding the left-side because of translateX and translateY.

I would suggest the following change:

.form-floating>.form-select~label
padding-top: 0.5rem /*same adjustment as the transformY to display the label above the input */
padding-bottom: 1.5rem /* adjust for transformY as well*/
font-size: 85% /* adjusts the size of the text in the same way as scale */

Thank you for your work!

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.2 (not tested on 5.3)

[Alken0]

PS: the examples and code only show the select-input, but this issue effects ALL floating-labels.

[poswalsameer]

The PR #40735 fixes the issue of alignment of floating labels as mentioned by the author of this issue. The said change is done in the _variable.scss file by creating 3 new variables for padding-top, padding-bottom, and font-size which are injected in the forms/_floating-labels.scss file.

@Alken0, you can have a look too here.

Kindly merge this PR as soon as possible.

[Alken0]

fixed in https://github.com/twbs/bootstrap/pull/40735

[Alken0]

The PR #40735 fixes the issue of alignment of floating labels as mentioned by the author of this issue. The said change is done in the _variable.scss file by creating 3 new variables for padding-top, padding-bottom, and font-size which are injected in the forms/_floating-labels.scss file.

@Alken0, you can have a look too here.

Kindly merge this PR as soon as possible.

@poswalsameer thank you very much for your work

[poswalsameer]

The PR #40735 fixes the issue of alignment of floating labels as mentioned by the author of this issue. The said change is done in the _variable.scss file by creating 3 new variables for padding-top, padding-bottom, and font-size which are injected in the forms/_floating-labels.scss file. @Alken0, you can have a look too here. Kindly merge this PR as soon as possible.

@poswalsameer thank you very much for your work

Thanks a lot!

[poswalsameer]

Hi @julien-deramond, I have created a PR that solves the said issue, can you please review it and let me know if further changes are required? Thank You!

[mdo]

Near as I can tell, this doesn't affect the functionality of floating label fields, so going to close out for now as a won't fix.