CODEWITHSUNDEEP
google-chrometextinputcopy-pastevertical-alignment
Martin
Martin

Reputation: 61

Chrome: input text element loses vertical alignment after copy / paste

I have a problem in the following html code in Chrome 19. If i copy the text "Hello" from the input field and paste it in the same field, the vertical alignment of the text is on top, but it should be in the middle.

If i remove the font-size property from style, the effect does not appear. Is that a browser bug, or am i doing something wrong with the style attribute ?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Title</title>
 </head>
 <body>
  <div style="width:200px;height:50px;">
   <input type="text" style="width:100%;height:100%;font-size:1.75em;" value="Hello world!"/>
  </div>
 </body>
</html>

Upvotes: 1

Views: 1379

Answers (1)

Jake Lazaroff
Jake Lazaroff

Reputation: 91

This issue is most definitely a browser bug, but there's still a way to fix it. What worked for me was adding a line-height to the input with a value equal to that of the height.

I set my heights in pixels, not percentages, and when I tried setting them in percentages it didn't seem to work. Ems did, though. Using this tactic, your code might look something like:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Title</title>
 </head>
 <body>
  <div style="width:200px;height:50px;">
   <input type="text" style="width:100%;height:2em;line-height:2em;font-size:1.75em;" value="Hello world!"/>
  </div>
 </body>
</html>

Upvotes: 2

Related Questions