auto adjusting text areas

[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/

[cmb]

Hi svasti,

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

Christoph

[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

[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

[Holger]

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

[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)

[Tata]

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.

[svasti]

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.

[cmb]

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
}

[svasti]

Seems to work!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!