Floating labels and select positioned with different padding on Firefox

[ddneat]

While reading the documentation with the v5 examples, I noticed that the floating labels and select value are off. The following screenshot was taken from the documentation: https://getbootstrap.com/docs/5.0/forms/floating-labels/#selects

• macOS 11.0.1
• Firefox 84.0.1

I could not reproduce this issue on Safari nor Chrome. My first investigation using the devtools and playing around with different paddings and font-sizes was unsuccessful.

Would you have any hints on resolving this issue? I would be happy to provide a PR.

[XhmikosR]

padding left/right of .5rem fixes the issue for me on Firefox but then it breaks on Chromium.

Not sure if it's a browser issue, but it looks like it.

[linhub15]

Material-UI also had this issue.
Looks like Firefox is rendering <select> differently than other browsers.

This is also present in the normal <select class="form-select">

Temporary Workaround

Add negative text-indent for Firefox.

@-moz-document url-prefix() {
  .form-select {
    text-indent: -.13rem;
  }
}

Example: https://codepen.io/linhub15/pen/RwGMogY

[ddneat]

Thanks for your investigation and answers!

I would suggest to enhance the bootstrap reboot to resolve this issue? Probably the reboot should unify text-indent of all browsers by a fixed value.

What's your opinion? May I provide a PR?

[ddneat]

It seems like Safari has a similar issue with line-height #32672

[mdo]

Edit: I'm a dummy and missed the fix was already enabled in the CodePen, sorry!

[mdo]

Looks like this might be documented as a Firefox bug already: https://bugzilla.mozilla.org/show_bug.cgi?id=1582545. Unsure if we implement the hack, or go with mentioning the bug? Thoughts @twbs/css-review?

[ffoodd]

Isn't this related to a fix @MartijnCuppens had for our new file input? I recall talking about a -moz- proprty related to left padding…

I’d be in favor of implementing the hack, however I'd change padding instead of an arbitrary text-indent (to make it obvious) with a link to the related bug.

[mdo]

I don't think so @ffoodd? At least I don't see anything for that in our CSS—might be missing something. I thought the issue was with vertical alignment and sizing, not horizontal.

[XhmikosR]

The issue is with horizontal alignment, and that Firefox has that extra padding compared to Chromium. IMHO we should add the hack if possible.

[ffoodd]

I confirm this is unrelated (found the comment tackling it ATT: #31955 (comment)).

However select > option have padding-inline-start: 3px which might cause this?

After a few tries, padding doesn't work, so I'd stick to text-indent as suggested. I'd go with 2px as a value, since it perfectly matches and I deduced this from comments in linked source file: they add 3px, taking a 2px border into account; we set a 1px border.

Turning this around, I didn't find a better way.

[alecpl]

padding-inline-start: 0.5rem on the select fixes it for Firefox, but breaks for Chrome. But -moz-padding-start: 0.5rem does the trick. This would have to be applied to both .form-select as well as .form-floating > .form-select because both cases are broken.

[alecpl]

The PR is assigned to v5.0.2, but this ticket to v5.1.0, please correct this.