Bootstrap: input[type=number] placeholder clipped in Firefox

[judowalker]

The placeholder is clipped in an input of type number in Firefox on Windows 10. This only happens with a class of form-control.

Minimal working example with latest dev:
https://codepen.io/anon/pen/NvRpgJ

[XhmikosR]

Works fine with Bootstrap v4.alpha-6: https://codepen.io/anon/pen/oezpKq

[judowalker]

I'm using the latest from v4-dev, not the cdn.

[XhmikosR]

Then please make a bin with rawgit and the files from the v4-dev branch.

On Aug 3, 2017 11:11, "judowalker" [e-mail] wrote:

I'm using the latest from v4-dev, not the cdn.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/twbs/bootstrap/issues/23209#issuecomment-319899599,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVVtZABuRh_WbFBk6ldXa0CgUQjkmxLks5sUYCdgaJpZM4Orv9K
.

[XhmikosR]

OK, confirmed: https://codepen.io/anon/pen/MvjXYj

/CC @mdo: did something change markup-wise or is the markup used fine?

[36864]

I played around a bit with your demo and it looks like increasing line-height from 1.25 to anything over 1.39948 will fix it.
It's weird because it's not a progressive thing, it's fully clipped at 1.39947 and fully visible at 1.39948.

[mdo]

I don't see the issue in Firefox 53 on macOS.

[XhmikosR]

I definitely see it on Windows with FF 55 and 56 with the codepen I pasted above which is using the latest v4-dev version.

[XhmikosR]

For me, it gets fixed with >= 1.381. I believe it's due to the font being used on Windows; Segoe UI. If I switch the font to Arial, it's OK with 1.25.

IE 11 and Edge work fine on the same Windows system.

[XhmikosR]

Hmm, I just noticed. The pen above doesn't include <meta name="viewport" content="width=device-width, initial-scale=1">. After adding that it is fine. Also, the inputs are of type number yet their placeholder was text in the original codepen.

So I believe this is a non issue after all. See https://codepen.io/XhmikosR/pen/zdzvad

[XhmikosR]

If that's the case we should also close #23227 too.

/CC @Johann-S

[judowalker]

@XhmikosR your example is not showing the bootstrap styles because it has a console error:

Refused to execute script from 'https://github.com/twbs/bootstrap/raw/v4-dev/dist/js/bootstrap.min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.

It also doesn't have a placeholder.
It also doesn't include <meta name="viewport" content="width=device-width, initial-scale=1"> which you stated fixes the issue.

Also, the inputs are of type number yet their placeholder was text in the original codepen.

I don't understand what you are saying here. Why can't a placeholder be text?

[XhmikosR]

Please check the codepen above. I'm still not sure your codepen is right or not and I don't have the time to investigate this more.

Someone else will have to have a look.

[judowalker]

That's the one I checked. See the screenshot below. It doesn't even have a placeholder and there's no Bootstrap styling.

[mdo]

Appears other input types have issues, too, with Firefox. See #23355

[chiraggmodi]

@mdo don't see this issue any other input type. its appear only in number type.

[QuantumHive]

Can confirm this for Windows 10, Firefox 55:

No problems in Windows 10, Chrome 60:

[TravellerSam]

Also clipped in Firefox 55/Linux. Setting the line-hight to 1.35 in $input-btn-line-height fixes it.
Screenshots: https://github.com/twbs/bootstrap/issues/23347#issuecomment-324674515

[mdo]

Consolidating issues; closing for #23347.