Mootools textarea scrollHeight

Question

How can I access the scrollHeight using mootools or some other property that contains the height so I can resize it to make an autogrow textarea?

Answer 1

Mootools offers a variety of Element 'dimension' functions that give you information on the scrollable and absolute element sizes. Full docs available here: http://mootools.net/docs/core/Element/Element.Dimensions

What you want to do is compare the return values of your element's getScrollSize() function to your element's getSize() function - in particular the 'y' member, which represents element and scrollable area height, respectively. Something along the lines of this should work:

var myElement = $('myElement'); // get a reference to your element
var scrollSize = myElement.getScrollSize(); // MooTools-specific function.
var elementSize = myElement.getSize(); // MooTools-specific function.
if (scrollSize.y > elementSize.y) { 
    // determine whether the scrollable area is greater than the dimensions
    // of the element. If so, resize the element to match the scrollable area.
    myElement.setStyle('height', scrollSize.y + 'px');
}

Answer 2

David Walsh created an excellent plugin for just this purpose: http://davidwalsh.name/flext-textrea