CODEWITHSUNDEEP
cssgoogle-chrome
trlemburg
trlemburg

Reputation: 137

Font overflows out of text input on Chrome

I am having an issue with the font causing a "text overflow" on input elements in Chrome. Here is a JSFiddle I have created:

http://jsfiddle.net/13e5q8Lf/2/

I have tried using overflow-x properties and whatnot but it doesn't seem to affect it. Is there a way I can stop those extra tails from appearing, or is this just a Chrome bug that has yet to be fixed?

Upvotes: 4

Views: 103

Answers (3)

CodingWithSpike
CodingWithSpike

Reputation: 43728

I'd venture to guess that it is related to the font too. Try entering "Lj" uppercase L lowercase j into the box. The left curl of the 'j' also goes underneath the 'L'.

I would just add:

text-indent: .2em;

to the input box. It would make non-'j' characters indented slightly from the left, but I doubt a user would stop using your site just because there is some left whitespace in the input box :)

Upvotes: 1

jkojoa
jkojoa

Reputation: 62

It looks like a chrome bug. As of version 37 they have changed the text rendering engine so this could be a bug. In the mean time add padding to the input

Upvotes: 1

jakubiszon
jakubiszon

Reputation: 3573

Try removing the margin from the input and give overflow:hidden to the enclosing div http://jsfiddle.net/dvjkh7xs/

<div style="overflow:hidden">
<input style="padding: 0; margin:0; font-size: 100px;" type="text" />
</div>

This is not a perfect solution. It will need you to surround the input with a div. You might as well surround it with a span with display:inline-block.

<span style="overflow:hidden; display:inline-block">
<input style="padding: 0; margin:0; font-size: 100px;" type="text" />
</span>

Upvotes: 3

Related Questions