Moshe pointed me to a nice part of Interface for jQuery where it can auto-expand textareas as you type in them, up to a certain pixel size. Nice, but we can do better.

The attached patch is based on the interface code, but changes the behaviour so it:
1) Auto-expands down until it reaches the bottom of the browser view.
2) Keeps expanding and scrolling along, as long as the textarea is shorter than the browser view.
3) Stops expanding and scrolling as soon as the textarea reaches the browser view height.

I also fixed some bugs:

  • Don't stretch the page scrollbar length when there is a lot of content.
  • Fix measurement mismatch due to missing line-height style.
  • Add tiny delay to ensure we have the real contents, including the last keypress/paste.
  • Don't do anything for textareas with lots of content (we are already at maximum size in this case).
  • Don't expand more than once every 250ms to avoid sluggish typing.

This behaviour is part of the #resizable toggle. IMO it is still useful to have the grippie in combination with auto-expansion.

Tested in Safari and Firefox OS X.

Comments

Steven’s picture

StatusFileSize
new7.19 KB

Crap, Interface used tabs in the code. Removed them.

moshe weitzman’s picture

works as advertised on OSX opera. i verified steven's browsers as well ... we need some IE testing.

Steven’s picture

wim leers’s picture

Very nice, Steven & Moshe!

Subscribing.

alanburke’s picture

Very Cool
Tested on IE6 and IE7... and... it works!

[Possibly seperate issues
1. Are we testing on below IE6?
Its actually works on IE 5.5... but Garland doesn't [sidebars missing]
2. Could we now reduce the default height of the body textarea?
]

toemaz’s picture

I support this feature. Nice work again.

dries’s picture

I support this too. Small but incredible convenient improvement.

Zen’s picture

Status: Needs review » Needs work

Nice one :)

It would be nice if the following can be addressed / confirmed:

  • Removing text doesn't reset the textarea.
  • Can the "growing" be eased rather than incrementally increased in a stop-start fashion? This will make things less distracting. Similarly, perhaps the bottom buffer can be increased by a line to minimise the chances of the scroll bar appearing.
  • FF2 XP - I notice the text in the textarea "flickering" and generally jittering about as I type.
  • Would it not be preferable for the resizing to be top first and bottom last? This would keep the typist's eye level constant for a longer period of time.. i.e. generally tend to be more comfortable.

Thanks.
-K

Steven’s picture

Status: Needs work » Needs review
StatusFileSize
new7.53 KB
  • Added code so it shrinks back until the original / user-set size.
  • Animated expanding and scrolling.
  • Increased blank area.

I don't think expanding up first makes sense. The natural expectation is that if you press enter, you go down. This is the case right until when the textarea reaches the bottom.

Steven’s picture

Oh and also fixed it so that it expands when you hit enter, not after you type the first character on a new line.

Zen’s picture

Status: Needs review » Needs work
  • Resizing a blank textarea beforehand and then typing makes the script go wonky as it first eases to the textarea's original size.
  • Text area "reset" works fine when I backspace, but fails when I select all and delete.
  • Pasting text that occupies an area larger than the textarea results in the script failing.
  • At times, the resizing behaves more like an after thought - I am usually way past the bottom of the text area.
  • In addition to the above point, eases seem to .. incremental rather than cumulative. IOW, they seem to queue themselves up rather than reorganise themselves into one single ease. Could the easing interval be increased in order to render it less perceptible?
  • The text jitter issue remains.

As alanburke stated earlier, the node body field can be made smaller due to this patch. Perhaps, that can be included right here.

Thanks,
-K

Steven’s picture

Or you could help out *sigh*. Isn't it fun to develop core features everybody wants but nobody seems to work on?

Zen’s picture

I would. But I don't grok jQuery yet, sorry.

-K

BioALIEN’s picture

Nice one Steven, this solves a big inconvenience indeed.

Just a thought, how would this patch behave when a user adds WYSIWYG modules?

Steven’s picture

WYSIWYG modules should disable the #resizable behaviour already. This patch has no effect on them.

jacauc’s picture

I like this a LOT! +many
Will apply the patch and do some testing in my devel environment

Thanks!

jacauc’s picture

When the scrollbar appears in Firefox 2, and I continue typing, the added text will be added to the bottom of the textarea, but the scrollbar stays at the top... In other words, the user cannot see what is being typed, except if he scrolls down.

I also noticed that the scrollbar is redrawn (it flickers) every time I press enter after this. This might be the related. Every time it is redrawn it is by default at the top as opposed to at the bottom..

rather difficult to explain this, but I can provide more info if required.

Thanks
jacauc

wolfderby’s picture

Subscribing

anders.fajerson’s picture

Status: Needs work » Needs review
StatusFileSize
new8.37 KB

Let's see if we can get this into Drupal 6. See video above for a visual presentation.

Re-rolled for HEAD. Also adressed:
* "Text jittering"/unresponsivness reported above - I had to revert to no easing since it was the cause. I *really* tried making it work, but I think this is good enough.
* Textarea shrinks when all text is deleted.
* Safari (3 on Win) was not expanding like the rest - was a bit jumpy. Added an extra check for that. Needs testing on Mac.
* Added a little more padding so "Split summary at cursor" and "Input format is visible" when fully expanded.
* It now checks if the textarea has been resized manually, then it doesn't auto-expand.
* Smaller body field.

Tested on Firefox 2 (Win/Linux), Opera 9 (Win), Safari 3 (Win) IE6/7

catch’s picture

Status: Needs review » Needs work

Very nice idea.

However, firebug says:

Drupal.ScrollIntoView is not a function
[Break on this error] Drupal.ScrollIntoView(e.parentNode.parentNode); 

for every character I type. Also using the grippy once disables this entirely - I understand the idea behind having both the grippy and the auto-resize, but I'm not convinced about it behaving like that if both happen to be used together.

anders.fajerson’s picture

Status: Needs work » Needs review

Thanks for the review! Make sure you force refresh the browser, the error is probably a caching issue. To me it makes sence that the manual resize takes preference over the auto-exand - the user knows best so to speak.

catch’s picture

Yes you're right, a forced browser refresh worked. On second thoughts, I can see how it'd be really annoying to have it change the textarea size after resizing it, and can't think of a clean way it could be reset to auto-resize on the same page. In that case needs review on Mac/linux etc.

chx’s picture

Version: 6.x-dev » 7.x-dev
elyobo’s picture

I like the sound of this; is there any chance you can release the jQuery code as a pure jQuery plugin as well? While I use Drupal for my own site, I'm also developing for some non-Drupal sites that this would be useful on.

lilou’s picture

Status: Needs review » Needs work

Patch non longer apply in collapse.js (Cannot apply hunk @@ 12 ), textarea.js (Cannot apply hunk @@ 9 ) and node.pages.inc.

catch’s picture

Component: javascript » usability

Moving to usability.

George2’s picture

Component: usability » other

i made a module like this for 6 and been thinking about porting the features of it to 7. my original intention for the module was to allow the admin to resize the row count of the body textarea for nodetypes, then it grew to include the comment, and cck fields. there's also an option to remove the 'split summary at cursor' button, and whether the textarea should have a grippie or not.

allowing the admin to choose how the field should be resized for the textarea i think is more beneficial, then just adding a default resize imo.

BarisW’s picture

Issue tags: +Usability, +D7UX

Added tags

mdlamar’s picture

Version: 8.x-dev » 7.x-dev

drupal 6.14 with textarea-grow_2.patch from above. here is the output:

patching file misc/textarea.js
Hunk #1 FAILED at 12.
Hunk #2 FAILED at 29.
2 out of 2 hunks FAILED -- saving rejects to file misc/textarea.js.rej
patching file misc/drupal.js
Hunk #1 succeeded at 229 (offset 2 lines).
patching file misc/textarea.js
Hunk #1 FAILED at 1.
Hunk #2 FAILED at 25.
2 out of 2 hunks FAILED -- saving rejects to file misc/textarea.js.rej
patching file modules/node/node.pages.inc
Hunk #1 FAILED at 247.
1 out of 1 hunk FAILED -- saving rejects to file modules/node/node.pages.inc.rej

Wolfflow’s picture

Subscribing

muriqui’s picture

Version: 7.x-dev » 8.x-dev
deviantintegral’s picture

Version: 7.x-dev » 8.x-dev
Status: Needs work » Closed (duplicate)

I'm marking this as a duplicate of #432730: Resizable textarea fields that expand and shrink to fit entered text as that issue has a newer patch.