Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Textarea auto expander (gallery-textarea-expander) on cdn

Last Updated: 07/2/12

+ 0 -

Marc

YUI Contributor

See 7 more by this user.

Created: 06/22/12
Last CDN Push: 11/7/12
Build Tag: gallery-2012.11.07-21-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.6.0pr3
Free for use.

I was looking for a textarea expander that was both effective and elegant. And I ran into the one developed by Neil Jenkins (http://www.alistapart.com/articles/expanding-text-areas-made-elegant/).
In stead of measuring height, it works with a hidden span where the content is copied.
As such, this component relies more on CSS than on Javascript and is extremely compact and efficient.

Min and max height for the text area can be set through CSS, a fixed 'height' will be modified by the component, so you should use min and max-height to set your desired size

Setting max-height:
.textarea-expander textarea {max-height:100px;}

Setting min-height
.textarea-expander textarea,.textarea-expander pre {min-height:100px;}

I tested this in versions 3.4.0 to 3.6.0pr2

Tags:
mschipperheyn

If you want to adjust the padding, font or border color for the textarea, you can provide your own skin file or simply override

.textarea-expander {
position: relative;
border: 1px solid #BDC7D8;
background: #fff;
}

.textarea-expander > textarea, .textarea-expander > pre{
padding: 3px !important;
font: 400 13px/16px helvetica, arial, sans-serif;
}

Code Sample

<script src="http://yui.yahooapis.com/3.6.0pr3/build/yui/yui-min.js"></script>

<html>
<head>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script type="text/javascript">
 
    YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2012.11.07-21-32'
}).use("node", 'gallery-textarea-expander', function(Y) {
        Y.all("textarea").plug(Y.TextareaExpander);
    });
</script>
</head>
<body>
    <form>
        <textarea>Hello world