Placeholder text is clipped on Firefox #851

philostler · 2015-07-16T17:21:24Z

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.

PhiLhoSoft · 2015-07-17T11:23:01Z

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).

philostler · 2015-07-17T13:49:31Z

@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!

To be solved properly when selectize/selectize.js#851 is resolved Reviewed in-person by Julian git-svn-id: https://svn.forgerock.org/openam/trunk@14682 0f4defcf-c51a-4c67-9f44-6fb5eba73c5d

karan-kang · 2015-08-18T20:58:16Z

This bug is reproducible on IE 11 also. This fixed it for me:

.selectize-input > input[placeholder] {
  width: 100% !important;
}

addzies · 2015-11-05T16:08:08Z

In the measureString function I changed the width value from 'auto' to '100%' and that worked.

bhantol · 2016-01-15T16:30:21Z

+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.

joallard · 2016-01-21T15:27:53Z

Looks like we'd need something more reliable for autogrow than "oh, let's add N pixels here"

landondurnan · 2016-05-05T20:27:49Z

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.

yoramdelangen · 2016-06-16T14:49:36Z

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.

kniziol · 2016-12-12T15:58:45Z

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

ghost · 2017-04-18T19:52:57Z

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.

shobhitsharma · 2017-07-19T22:29:41Z

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.

doushan · 2018-07-04T08:25:14Z

Hello,

Do check the blog post for supported CSS properties on placeholders.

https://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

xhafan · 2020-11-02T16:43:21Z

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.

Fix for #851 - Placeholder text clipping Fixed issue #870, remove_button plugin closing bootstrap modals

PhiLhoSoft mentioned this issue Mar 2, 2016

selectize - generated markup does not have the pass on attributes like name= to generated <input> machineboy2045/angular-selectize#123

Open

marcusmolchany mentioned this issue Aug 3, 2016

Input width calculation is wrong, if custom font is used. #173

Closed

joallard added the bug label Aug 3, 2016

joallard added this to the 0.13.0 milestone Aug 3, 2016

risadams added a commit that referenced this issue Nov 3, 2020

Fix for #851 - Placeholder text clipping

fff08f9

risadams added a commit that referenced this issue Nov 3, 2020

Support for Bootstrap 4

7472980

Fix for #851 - Placeholder text clipping Fixed issue #870, remove_button plugin closing bootstrap modals

risadams mentioned this issue Nov 3, 2020

Support for Bootstrap 4 #1552

Merged

risadams added a commit that referenced this issue Nov 3, 2020

Support for Bootstrap 4

348c6b4

Fix for #851 - Placeholder text clipping Fixed issue #870, remove_button plugin closing bootstrap modals

risadams closed this as completed Nov 4, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Placeholder text is clipped on Firefox #851

Placeholder text is clipped on Firefox #851

philostler commented Jul 16, 2015

PhiLhoSoft commented Jul 17, 2015

Uh oh!

philostler commented Jul 17, 2015

Uh oh!

karan-kang commented Aug 18, 2015

Uh oh!

addzies commented Nov 5, 2015

Uh oh!

bhantol commented Jan 15, 2016

Uh oh!

joallard commented Jan 21, 2016

Uh oh!

landondurnan commented May 5, 2016 •

edited

Loading

Uh oh!

yoramdelangen commented Jun 16, 2016

Uh oh!

kniziol commented Dec 12, 2016 •

edited

Loading

Uh oh!

ghost commented Apr 18, 2017

Uh oh!

shobhitsharma commented Jul 19, 2017

Uh oh!

doushan commented Jul 4, 2018

Uh oh!

xhafan commented Nov 2, 2020

Uh oh!

Uh oh!

Placeholder text is clipped on Firefox #851

Placeholder text is clipped on Firefox #851

Comments

philostler commented Jul 16, 2015

PhiLhoSoft commented Jul 17, 2015

Uh oh!

philostler commented Jul 17, 2015

Uh oh!

karan-kang commented Aug 18, 2015

Uh oh!

addzies commented Nov 5, 2015

Uh oh!

bhantol commented Jan 15, 2016

Uh oh!

joallard commented Jan 21, 2016

Uh oh!

landondurnan commented May 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yoramdelangen commented Jun 16, 2016

Uh oh!

kniziol commented Dec 12, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Solution

Before

After

Uh oh!

ghost commented Apr 18, 2017

Uh oh!

shobhitsharma commented Jul 19, 2017

Uh oh!

doushan commented Jul 4, 2018

Uh oh!

xhafan commented Nov 2, 2020

Uh oh!

landondurnan commented May 5, 2016 •

edited

Loading

kniziol commented Dec 12, 2016 •

edited

Loading