CODEWITHSUNDEEP
javascriptmootools
PopCornCupCakes
PopCornCupCakes

Reputation: 1

Mootools textarea scrollHeight

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?

Upvotes: 0

Views: 882

Answers (3)

Adam
Adam

Reputation: 359

Here's a simple method I'm using that expands but also contracts the textarea.

The issue you're always going to have is styling on the textare (padding/border). The first thing to know is that getSize() will get the size of the textarea from absolute top to the absolute bottom, taking into account padding and borders. However, the actual style height of the text area .getStyle('height').toInt(), is the inside of the text box without padding and border. This is the part you need to be interested in as, when you set your height, it sets that, it doesn't set the full height of the textarea from absolute top to bottom.

Here's a working example, with a textarea that's styled (See Demo) This will also resize the element correctly if you ran it inside domReady.

    function expBox(el){
        var e     = $(el.id);
        if(typeof(e._expBox) == "undefined"){
            var v           = e.value;
            e.value         = "";
            var ss          = e.getScrollSize();
            var s           = e.getSize();
            var h           = e.getStyle("height").toInt();
            e._expBox       = (s.y-h)-(s.y-ss.y);
            e.value         = v;
        }
        var k = event.keyCode || event.charCode;
        if(k == 8 || k == 46){
            e.setStyle("height","auto");
        }
        var ss    = e.getScrollSize();
        e.setStyle("height",(ss.y-e._expBox));
    }

Demo: http://jsfiddle.net/greatbigmassive/M6X5j/

Upvotes: 0

Eric
Eric

Reputation: 2087

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

Upvotes: 0

fil maj
fil maj

Reputation: 2312

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');
}

Upvotes: 2

Related Questions