CODEWITHSUNDEEP
htmlcssgoogle-chromefonts
Sergey L
Sergey L

Reputation: 547

Google Chrome input text is cut off. Is it font issue or browser?

Please take a look at this page http://s.codepen.io/nfxpnk/debug/akLbwG

As you can see at the first block with pink background, input with value "ÄÄÖÖÜÜ" doesn't have dots on the top.

And that behavior is only then height property on input tag is set.

Is it font issue or google chrome browser bug?

Unfortunately i can't remove height property on my project from all input fields.

How to fix this issue?

PS. Firefox and IE doesn't have this bug.

Thanks.

Upvotes: 3

Views: 4342

Answers (1)

Carol McKay
Carol McKay

Reputation: 2424

Change height to min-height

font-family: 'adihausregular',Arial,Helvetica,Verdana,sans-serif;
font-size: 40px;
min-height: 60px;
line-height: 54px;
width: 100%;

It seems that if you want you can also add max-height: 60px; and it still works.

Upvotes: 1

Related Questions