0

I need the text inside a textarea to look exactly the same as the text inside a div element, including padding, etc.

The html below works on my computer (Windows Chrome). However, when I view it on an actual iPhone (Safari/Chrome, OS 10), it adds extra space inside the textarea, similar to left-padding (but left-padding is 0). How do I get rid of this space?

(I don't think I had this issue in iOS 9.) 

<style>
.my_area{
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: arial;
  font-size:17px;
  line-height:26px; 
  width:200px;
  overflow:hidden;
  background:yellow;
  border:1px solid black;
  border-radius:0;
}
</style>

<textarea class = "my_area">q w e r t y u i o p a s d f g h j k l z x c v b n</textarea>
<br/>
<div class = "my_area">q w e r t y u i o p a s d f g h j k l z x c v b n</div>

Edit: I use

width=device-width, initial-scale=1.0

in the header so I'm viewing the page at proper resolution for mobile.

user984003
  • 28,050
  • 64
  • 189
  • 285
  • This appears to be the same issue: http://stackoverflow.com/questions/21935912/shadow-dom-on-textarea-in-ios-forces-padding#21948469. For fixing it, it looks like the answer is that you can't. – Joseph Marikle Feb 06 '17 at 20:00

1 Answers1

0

Like the comment said, it doesn't look like there is a solution.

I ended up adding 3px left and right padding to the element when it is iOS. This seemed to be the right amount both on the iPad and iPhone.

user984003
  • 28,050
  • 64
  • 189
  • 285