Page 1 of 3

auto adjusting text areas

Posted: Wed Jan 02, 2013 11:48 am
by svasti
Hi developers,

in my latest plugin "Stylemanager" (sorry not yet published) the backend has text area inputs auto adjusting for size. Just a little java script and some really really tricky css, but the result is quite cool: input is just one line and when you enter more and more, the text area gets bigger and bigger. You start thinking, why haven't we had this before?

Now, what about having this in the CMSimple_XH backend, e.g. in the plugin configs? I'll put in on the roadmap.

Edit: How it is done is explained here: http://www.alistapart.com/articles/expa ... e-elegant/

Re: auto adjusting text areas

Posted: Wed Jan 02, 2013 8:49 pm
by cmb
Hi svasti,

a very nice idea, that should improve usability of the config and language forms.

Christoph

Re: auto adjusting text areas

Posted: Mon Jan 14, 2013 12:06 pm
by cmb
Hi svasti,

Tata has pointed me to an alternative solution: http://sharepointkunskap.wordpress.com/ ... -textarea/. This seems to work without the mirror element; I'm not sure about potential drawbacks and pitfalls. Might be worth checking that more thoroughly.

Christoph

Re: auto adjusting text areas

Posted: Mon Jan 21, 2013 11:58 am
by svasti
Yes, on the internet you can find several different solution proposed. Of the ones I tried the solution by this guy from the Opera Browser worked best for me, so I used it. Nevertheless, it is a bit tricky.

You are right, a decision for inclusion in the CMS may need some more deliberation and testing. So the proposal is a bit premature.
And when we have finally settled on a well working soloution, it could be used everywhere in the CMS.

svasti

Re: auto adjusting text areas

Posted: Mon Jan 21, 2013 12:08 pm
by Holger
svasti wrote:You are right, a decision for inclusion in the CMS may need some more deliberation and testing. So the proposal is a bit premature.
And when we have finally settled on a well working soloution, it could be used everywhere in the CMS.
+1

Holger

Re: auto adjusting text areas

Posted: Fri Mar 01, 2013 8:35 pm
by svasti
Well, Tatas proposal doesn't do the job. It is only autoresizing when text is entered. If you don't enter text no auto resizeing.
http://chuvash.eu/2011/12/14/the-cleane ... -textarea/ (See my comment on that page)

Re: auto adjusting text areas

Posted: Fri Mar 01, 2013 9:26 pm
by Tata
svasti wrote:Well, Tatas proposal doesn't do the job. It is only autoresizing when text is entered.
Is that not what we want? Having a teaxtare automatically resizing after actual needs? In configuration some values need only one line. This can be handeled bz textarea easily. But some of them (e.g. in langiage files) need often a couple of lines. I assume the textarea would resize then automatically.

Re: auto adjusting text areas

Posted: Fri Mar 01, 2013 10:11 pm
by svasti
Tata wrote:But some of them (e.g. in langiage files) need often a couple of lines. I assume the textarea would resize then automatically.
sorry, it doesn't do it.
The script shows only 1 line (or 2 etc, just as preset), irrespective of how much text is there. Only when you start typing, it will start to autoresize. There is no autoresizing without typing.

But we have long and short values and autoresizing should be there right from the start when the values are shown. Mostly one doesn't change the values, so mostly there will be no typing.

The problem is that resizing is triggerd by

Code: Select all

t.addEventListener
it should also be triggered already by onload, so that we get resized textareas right away. May be the script could be adjusted. Otherwise we could use the script from the Opera programmer or rather postpone the feature.

Re: auto adjusting text areas

Posted: Fri Mar 01, 2013 11:20 pm
by cmb
svasti wrote:The problem is that resizing is triggerd by

Code: Select all

t.addEventListener
it should also be triggered already by onload, so that we get resized textareas right away. May be the script could be adjusted.
Basically it should suffice to call resize(t) after the document was loaded. Without having tested it:

Code: Select all

window.onload = function() {
	var t = document.getElementsByTagName('textarea')[0];
	var offset= !window.opera ? (t.offsetHeight - t.clientHeight) : (t.offsetHeight + parseInt(window.getComputedStyle(t, null).getPropertyValue('border-top-width'))) ;

	var resize 	= function(t) {
		t.style.height = 'auto';
		t.style.height = (t.scrollHeight  + offset ) + 'px';	
	}

	t.addEventListener && t.addEventListener('input', function(event) {
		resize(t);
	});

	t['attachEvent']  && t.attachEvent('onkeyup', function() {
		resize(t);
	});

   resize(t); // this line would have to be added
}

Re: auto adjusting text areas

Posted: Sat Mar 02, 2013 1:02 am
by svasti
Seems to work!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!