CODEWITHSUNDEEP
javascriptjqueryhtmlcsstextarea
solar apricot
solar apricot

Reputation: 429

textarea in FF and chrome to display with same size

I have this textarea which I am doing a auto-resize, and for that I am using the scrollHeight property. FF looks very different from Chrome even when the page is just loaded and the field is empty. I have looked at a few suggestions (like stackoverflowlink), but I am not sure how to get them to look the same

This is the code that takes care of resizing:

 $('#idTextArea').each(function () {
        this.setAttribute('style', 'overflow-y:hidden;width:600px;');
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
        console.log("this.scrollHeight",this.scrollHeight);

      }).on('input', function () {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
});

and this is the field: 

<textarea id="idTextArea" 
      name="textName"
      maxlength="200"
      style="width: 600px;"><%=controller.getText("textName") == null? "":controller.getText("textName")%></textarea>

when my page loads, console.log prints 26 on Chorme and 49 on FF. So my question is: How to I get them to look the same?

Upvotes: 0

Views: 49

Answers (1)

Tomasz Myśliwiec
Tomasz Myśliwiec

Reputation: 31

Maybe try to add:box-sizing: content-box; to your textarea.

Upvotes: 1

Related Questions