Selectize.js: Placeholder text is clipped on Firefox
On Firefox 39 OS X (not tested on earlier versions of FF) the placeholder text is initially rendered too small and clips trailing characters. This only happens on FF, Chrome and Safari work as expected.
After selecting the control and deselecting, the placeholder expands and is no longer clipped.
philostler
All 13 comments
My experience is the opposite, I see the problem in Chrome, not in Firefox. Perhaps it depends on the chosen theme (Bootstrap 3 in my case) or the used font.
As a ( bad) workaround, we add spaces at the end of the placeholder.
I think the main issue is in the computation of the width of the text, done in the measureString function. Perhaps some CSS properties are missing (I wonder already at the missing fontStyle, although that's not the issue here).
PhiLhoSoft
on 17 Jul 2015
@PhiLhoSoft I'm using the Bootstrap 3 theme as a base as well so we have cross over there. Nice thought on the workaround, I'll go with that until there's a fix. cheers!
philostler
on 17 Jul 2015
This bug is reproducible on IE 11 also. This fixed it for me:
.selectize-input > input[placeholder] {
width: 100% !important;
}
karan-kang
on 18 Aug 2015
In the measureString function I changed the width value from 'auto' to '100%' and that worked.
addzies
on 5 Nov 2015
+1
ditto happening in ie11.
@addzies Adding 100% solves the problem only if your selectize is well placed in proper columns (bootstrap grid etc.). With 100% width when the <test> is added to the <body> may result into the full viewport width.
The problems seems to be +4 in the call after
measureString(val) + 4
4 pixels are not nearly enough after the initial space that browsers add to the placeholders in the input.
bhantol
on 15 Jan 2016
Looks like we'd need something more reliable for autogrow than "oh, let's add N pixels here"
joallard
on 21 Jan 2016
Was running into this issue and it was related to the styles on the input inside selectize:
.selectize-input {
input[type="text"] {
padding: 0 20px 0 0;
}
}
The above resulted in clipping 20px.
The padding isn't needed and when it's added on render throws off the width of the input depending on your box model.
landondurnan
on 5 May 2016
Same issue but resolved it by setting the box-sizing instead of border-box i've put it on initial and now its showing it proper while using padding.
This fixed it for me:
.selectize-input {
input[placeholder] {
box-sizing: initial;
}
}
Because the width calculator is not keeping track of already existing paddings and/or detecting the border-sizing settings. If I would set the width to width: 100% !important it would give me not the effect of an labeled input field.
yoramdelangen
on 16 Jun 2016
Some problem here. MacOS + Google Chrome 55.0.2883. Using Bootstrap 3 and these styles for placeholders in inputs:
::-moz-placeholder {
color: #aaa;
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
font-family: 'WorkSans Light', sans-serif;
text-align: center;
text-transform: uppercase;
}
:-ms-input-placeholder {
color: #aaa;
font-family: 'WorkSans Light', sans-serif;
text-align: center;
text-transform: uppercase;
}
::-webkit-input-placeholder {
color: #aaa;
font-family: 'WorkSans Light', sans-serif;
text-align: center;
text-transform: uppercase;
}
Solution
.selectize-input:not(.has-items) input {
text-align: center;
width: 100% !important;
}
Before
After
kniziol
on 12 Dec 2016
Thank you @kniziol! I used your solution but changed the placeholder colors to #b1b7ba, which seems to be the correct color to match the selectize placeholder in BS3.
CJEdgerton
on 18 Apr 2017
width: auto !important; or width: 100% !important; might fix it, but it will break other cases.
This is bug while calculating input width within selectize library (https://github.com/selectize/selectize.js/blob/master/src/selectize.js#L151) and needs to have better calculation.
shobhitsharma
on 20 Jul 2017
Hello,
Do check the blog post for supported CSS properties on placeholders.
https://blog.ajcw.com/2011/02/styling-the-html5-placeholder/
doushan
on 4 Jul 2018
I my case, I use Turbolinks, which replaces body tag content on every request, removing the span used to calculate text input width. So I had to "reset" selectize on every page load using the following code:
(window as any).Selectize.$testInput = undefined;
to make it add the span again.
xhafan
on 2 Nov 2020
Related issues
IAmJulianAcosta
路
5Comments
vilimco
路
5Comments
tr4g
路
4Comments
aureole82
路
3Comments
shoaibshakeel381
路
5Comments
Most helpful comment
This bug is reproducible on IE 11 also. This fixed it for me: