1

I have the following content:

    <form>
        <span>
            <input
                placeholder="03/10/2016 - 04/12/2016"
                type="text"
                readonly />
        </span>
     </form>

In Chrome, this content is clipped, but in Firefox and Safari, it is not. As simple as this example is, I cannot figure out how to make the text not clip in Chrome. The width of the content is computed differently in both browsers.

EDIT: Based on the comment from another user that the fiddle looks fine in Chrome, maybe it's worth noting that I'm on Mac OSX.

Here is a fiddle that demonstrates the issue: https://jsfiddle.net/danallen88/whk64gyn/

Screenshots:

Firefox: Firefox

Chrome: Chrome

j08691
  • 204,283
  • 31
  • 260
  • 272
Daniel Allen
  • 894
  • 1
  • 10
  • 23
  • 1
    It looks fine to me too. Possible solution: Is the length of the placeholder fixed? If so, you could set the font to a fixed-width font like Courier and then set the `size` attribute to the length of the placeholder (assuming you are ok with using a fixed with font) – Cave Johnson Apr 18 '16 at 18:25
  • 2
    If you're looking to have the input be at least the size of the placeholder text, this solution may help you out: http://stackoverflow.com/a/17303394 – Jonathan Michalik Apr 18 '16 at 18:26
  • 2
    Funny, for me the placeholder text is clipped Firefox but not Chome. Anyhow this is caused by variation in font rendering. Always leave ample room for some variation. – Alexander O'Mara Apr 18 '16 at 18:26
  • 1
    @Andrew changing the font is not an option for me unfortunately. Right now I'm using a font-family set to "Open Sans", Helvetica, sans-serif @ JonathanMichalik - it's not just the placeholder that's the issue, this initially manifested itself with the value of the input being set to a similar date string. The placeholder was just for the fiddle purpose but nonetheless shows the issue. @ AlexanderO'Mara - Can you clarify what you mean by leaving ample room? There is no styling applied here, this just appears to be a behavior of the browser. – Daniel Allen Apr 18 '16 at 18:31
  • 1
    Actually you probably don't need a fixed-width font. I _think_ most fonts will still fit. Also, you can use Jonathan's solution and just replace 'placeholder' with 'value'. – Cave Johnson Apr 18 '16 at 18:34
  • 1
    Hilariously it doesn't clip in either for me. Anyways, if you actually size the box this will become a lot less of a problem, as the issue is with how the borwsers are auto-sizing. Bonus points if you don't mind the js overhead of using something like [Stretchy](https://leaverou.github.io/stretchy/). While your at it, I highly recommend fixing Chrome's terribly low-contrast placeholder color via `::-webkit-input-placeholder { color: #556; }`, which will make it pass WCAG 2.0 AAA for any size. Should probably do that to Firefox's too, but Firefox's passes AA I believe. – abluejelly Apr 18 '16 at 18:45
  • 1
    Thanks all for the feedback. Since I'm working in an Angular app, I'm just going to drop in [angular-elastic-input](http://jacek-pulit.github.io/angular-elastic-input/) which seems similar to Stretchy. Was hoping that this was purely a CSS issue with no JS needed. – Daniel Allen Apr 18 '16 at 19:11

0 Answers0