Align floating labels with form-select sizes

[patrickzzz]

Description

This pull request addresses an alignment issue with Bootstrap’s floating labels when using the small form-select-sm element. The problem occurs because the selected value is misaligned with the floating label due to reduced padding applied to the small select. By adjusting the padding-left property to match the floating label's padding, this PR ensures the selected value aligns properly with the label.

Motivation & Context

The change is required to fix the visual misalignment of the form-select-sm element when used with floating labels, as reported in GitHub Issue #41008. This fix ensures a consistent and visually correct layout for the small select element when used with floating labels.

Type of changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Refactoring (non-breaking change)
• [ ] Breaking change (fix or feature that would change existing functionality)

Checklist

• [x] I have read the contributing guidelines
• [x] My code follows the code style of the project (using npm run lint)
• [ ] My change introduces changes to the documentation
• [ ] I have updated the documentation accordingly
• [ ] I have added tests to cover my changes
• [X] All new and existing tests passed

Live previews

You can see the changes in the live preview, when adding the form-select-sm class:

• https://deploy-preview-41013--twbs-bootstrap.netlify.app/docs/5.3/forms/floating-labels/#selects

Related issues

• Closes #41008

[coliff]

Great PR. I just tested this in a StackBlitz with the CSS generated from the deploy preview.

https://stackblitz.com/edit/bzr9zn?file=index.html

Separate issue I spotted though is that text is cropped on the Large variant (see the 'p' in the word 'Open')

[patrickzzz]

Hi @abay-2002 and @coliff, thanks for your feedback!

Yes, I have also observed the behavior with form-select-lg.

This PR includes an adjustment to the padding-left for both form-select-sm and form-select-lg, aiming to improve alignment for selected values across sizes.

As for the cropped text in form-select-lg, I also see this as a separate issue, as it may require a different approach.

Thanks again for your insights!

[patrickzzz]

Hi @louismaximepiton,

Thanks for the feedback!

The documentation at this point refers to the select’s size attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size), which is still not fully supported by Bootstraps .form-floating. My changes only address alignment issues in form-select-sm and form-select-lg variants with floating labels, but they don’t affect or enable the size attribute functionality. So we’ll need to keep that note in the docs.

Otherwise, I completely agree with your other points!

Edit: Or do you mean especially this sentence Other than .form-control, floating labels are only available on .form-selects.?

Regards, Patrick

[theodorejb]

@julien-deramond The cropped text issue would indeed be fixed by #39483. I'm still hoping it can be merged and included in the next patch release. I just rebased it again to fix the merge conflict following this PR.

[julien-deramond]

Thank you, @theodorejb, I'll try to find time to review it soon.