IE 10 ... "Rows" ignored

[JoeMoon5]

I'm using the autosize plugin for our company intranet site, and our desktops have IE 10 and Chrome (latest version) installed.

When I have a textarea with 2 rows, but with only one line of text, the script resizes the text area to one row. It doesn't do this in Chrome. In Firefox, I have the row+1 problem mentioned in Issue #220. I was using version 1.8 of autosize before, and didn't run into this bug there. For layout purposes I want to keep two rows as a minimum for some textareas on my form.

My fix was to get a minimum height that can override the endHeight variable. I get this value by calculating the rows value times the client height. Since this is creating and removing an additional HTML element on each keypress, this is probably not the most efficient fix. ("Height" was coming back as an empty string in IE unless I specify it in the in-line style).

(following inserted after line where endHeight is declared and calculated in the update() function: )

var rows = (!ta.rows ? 1 : ta.rows);
var lineHeight = getLineHeight(ta)
var minHeight = (lineHeight * rows) + heightOffset;
if (endHeight < minHeight) endHeight = minHeight

I'm getting the lineHeight from adding this bit of code from StackOverflow, modified to assume the element is a textarea:

function getLineHeight(ta){
    var temp = document.createElement(ta.nodeName);
    temp.rows = 1;
    temp.setAttribute("style","margin:0px;padding:0px;font-family:"+ta.style.fontFamily+";font-size:"+ta.style.fontSize);
    temp.innerHTML = "Test";
    temp = ta.parentNode.appendChild(temp);
    var ret = temp.clientHeight;
    temp.parentNode.removeChild(temp);
    return ret;
}

[jackmoore]

Testing in IE10 and can't reproduce the issue. Use JSFiddle to create a demonstration of the problem, or find some other way to demo the problem so that it's reproducible.

[JoeMoon5]

I'm seeing the issue in IE 10 in this Fiddle: https://jsfiddle.net/xpx8sbj2/6/

[jackmoore]

Thanks for providing a demo. I'm still not seeing a problem, but I'm testing IE10 using IE11's IE10 document mode. So there being a difference between native IE10 and IE10 emulation mode. I'll try another VM later and get back to you.

[cagataycivici]

This only happens in native IE10, a live demo is also available at;

http://www.primefaces.org/showcase/ui/input/inputTextarea.xhtml

Where we use the autosize plugin.

Thank you.

[sudheerj]

The issue is replicated in IE9 version as well.The above workaround/fix will work but there will be slight resize because of the line height calculation.

[elangosundar]

@cagataycivic any other solutions there to solve IE10 above mentioned issues

[robneild]

The problem only happens on IE9 (and I assume IE10). It doesn't happen in IE11 or in emulation modes The problem can also be reproduced on the demo page http://www.jacklmoore.com/autosize/. It goes down to 1 line on IE9. It would be more noticeable if setting 'cols'

The problem is this line 'var endHeight = ta.scrollHeight + heightOffset' In IE9 and IE10 'scrollHeight' ignores 'cols' and gives height of actually typed content

[robneild]

Testing old browsers can be done using Microsoft virtual machines https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

[robneild]

I am experimenting with the following fix

var endHeight = Math.max(ta.scrollHeight,ta.clientHeight) + heightOffset;