How to shrink a TextArea

Question

Hello, i am using YUI 3.1 Library from Yahoo and also the TextExpander to let a TextArea to grow up when a user type.

The code below initialize the TextArea:

YUI({gallery: 'gallery-2010.03.23-17-54'
    }).use("node", 'gallery-text-expander', function(Y) {
    Y.one('#myTextArea').plug(Y.TextExpander);
});

It's work perfectly but now i have a question in this scenario:

1) The user type, the TextArea grow up for many rows and then the message is post to the server.

2) After the post, i clean the TextArea with $('myTextArea').value='' but it's not shrink as expected and still have many rows when in real must back to the original size.

I notice inside the code of the TextExpander (http://yuilibrary.com/gallery/buildtag/text-expander/gallery-2010.03.23-17-54) exist a method called "shrink_area" but how i can call this method $('myTextArea').shrink_area() ? (i know is a wrong line of code but i need to obtain something like this) or what is the best way ?

Thanks in advance for the suggestions and tips.

Answer 1

Textarea has rows and cols properties for changing the size. Try setting these.

Answer 2

Oh well i solved the problem myself.

So instead to try to call the internal method of the plugged class (that was nice to know how to do, probably using a custom namespace) i wrote a little function that do the trick.

1) first of all i set the CSS property min-height in the class

2) after clear the TextArea i set the height as the min-height

the code below shown the function that do the trick

function shrinkTextArea(element) {
    // clear
    $(element).value ='';

    // shrink
    $(element).style.height = $(element).style.minHeight;
}