I have set in the css the textarea to have a min-height of 66px. But when shown in browser, it is 100px. I realised there is the follwoing line when rendered in the browser:
It should come from the line in the js that
container.css({"min-height": textarea.outerHeight(false)});
as when I comment it, the textarea becomes 66px height again (though the buttons following it would not be properly placed). I don't understand where the 100px come from.
Is it a bug or Any idea how to fix it? Thanks!
Have you seen the "minimum height" example here: http://bgrins.github.io/ExpandingTextareas/? This should work as expected, so maybe you can try copying what it is doing. If this doesn't help, then can you submit a test case to show exactly what you are seeing?
I had the same issue, also exactly 100px min-height in the div. In my case the issue was, that the textarea was inside of an hidden div (it gets displayed as soon as the user clicks on a link).
I solved it by manually de/activating the expanding textarea using .expandingTextarea() respectively .expandingTextarea('destroy') (added to the show/hide onClick events).
I feel it makes more sense to apply the min-height styles to the clone (pre), in order to keep the two elements’ heights in sync.
This issue can be fixed if the min-height styles are set (on the clone or container) prior to any style modifications on the textarea, and the textarea is given a CSS box-sizing property of border-box. See: http://jsbin.com/OFesAPU/2/edit where:
var pre = container.find("pre").css($.extend(preCSS, {"min-height": textarea.outerHeight(true)}));
Is there any reason why box-sizing: border-box and width: 100% are not set on the textarea (as they are on the alistapart article)?
I have set in the css the textarea to have a min-height of 66px. But when shown in browser, it is 100px. I realised there is the follwoing line when rendered in the browser:
FYI, the textbox is dynamically added to the page (not loaded initially) by using .load(). I think this may be the cause of the problem.
Have you seen the "minimum height" example here: http://bgrins.github.io/ExpandingTextareas/? This should work as expected, so maybe you can try copying what it is doing. If this doesn't help, then can you submit a test case to show exactly what you are seeing?
I had the same issue, also exactly 100px min-height in the div. In my case the issue was, that the textarea was inside of an hidden div (it gets displayed as soon as the user clicks on a link).
I solved it by manually de/activating the expanding textarea using
.expandingTextarea()respectively.expandingTextarea('destroy')(added to the show/hide onClick events).I believe the
min-heighton the container is not being set correctly (see: https://travis-ci.org/domchristie/ExpandingTextareas/jobs/17548852), and also: http://jsbin.com/IzeYoMI/3/editI feel it makes more sense to apply the
min-heightstyles to the clone (pre), in order to keep the two elements’ heights in sync.This issue can be fixed if the
min-heightstyles are set (on the clone or container) prior to any style modifications on the textarea, and the textarea is given a CSSbox-sizingproperty ofborder-box. See: http://jsbin.com/OFesAPU/2/edit where:Is there any reason why
box-sizing: border-boxandwidth: 100%are not set on the textarea (as they are on the alistapart article)?This would also fix #27
Fixed by #38