PDA

View Full Version : Elastic text areas - text areas the facebook way



francodacosta
24 Apr 2009, 7:58 AM
http://www.francodacosta.com/demos/extjs/autoHeightTextArea/logo.jpg


Ext.fc.autoHeightTextArea

Text Area the facebook way

About

Get your text areas to grow/shrink according to content

Features

No endless timer events, height is updated on key press
You can define max an min height and height increment for the text area
Can be applied directly to a HTML Text Area element, no need to create an Ext.Form.TextArea element


Demo & Download

http://www.francodacosta.com/demos/extjs/autoHeightTextArea/

syscobra
24 Apr 2009, 9:22 AM
Nice addon, i will try it on Ext core to see if it works the same way.
Haven't tryed yet, but i see in the code it triggers on keyup?, what happens if the default text in the text area is bigger than the textarea?, it resizes too?.
I mean if i put text in the textarea from lets say a DB and that text is bigger it gets resized too?.

Thanks for sharing

francodacosta
24 Apr 2009, 9:36 AM
In my local machine it's working well with Ext 3

The text box will be resized if the default text is bigger / smaller than the initial text area height

abraxxa
29 Apr 2009, 6:03 AM
Isn't this the same as the grow attribute textarea has?

francodacosta
29 Apr 2009, 7:18 AM
Can be applied directly to a HTML Text Area element, no need to create an Ext.Form.TextArea element


The main difference is that this extension can be applied directly to an HTML Text Area element also the Ext TextArea has some ugly problems with the scroll bar, just try it and see the scroll bar showing and hiding on each resize

mystix
29 Apr 2009, 6:11 PM
neat =D>

different behaviours on Safari/Chrome and Firefox though.

in Safari/Chrome, typing an endlessly long string auto-wraps it; when string content height exceeds the height of the textarea, it doesn't grow.

in Firefox, typing the same endlessly long string doesn't auto-wrap it; textarea grows the moment a space or newline is introduced in the endlessly long string.

francodacosta
30 Apr 2009, 6:31 AM
Thats a browser specific feature, some browsers do not split entire words

If you type the long string one letter after another it should resize because the resize code is triggered on key up

I guess an option could be added to allow the textarea to grow/shrink according to text width

mystix
30 Apr 2009, 7:47 AM
Thats a browser specific feature, some browsers do not split entire words

toe-may-toes, toe-mah-toes. oh well. ;)



If you type the long string one letter after another it should resize because the resize code is triggered on key up

i did, but no growth.



I guess an option could be added to allow the textarea to grow/shrink according to text width
that'd be really neat to see. (TextMetrics perhaps?)