Resizable textarea fields that expand and shrink to fit entered text

Two questions:

1. Does this patch convert the text field in core to use this resizing or the body that is provided by node.module? Would be great to keep an eye on #372743: Body and teaser as fields.
2. Is there any way to disable this? I could imagine if you have huge amounts of text, you don't want to endlessly scroll the whole page, but just the textfield (current behaviour). And, related, what happends with JavaScript disabled?

...now I get it: +1 on the general concept.

Just tried it and a few things came up.

(Concerning 2. above:) If your browser doesn't fill the whole screen the 600px really should be less for the whole stop-resizing-at-a-certain-point thing to work. I have no idea how to solve this problem just wanted to note that.

Also it might be worth discussing, whether the gray bar that indicates that the textarea is resizable makes any sense with this patch applied. I personally would favor removing it, but I'm not sure if there's not a use-case for that or even a usability issue with removing the visual signal of that textarea being resizable.

So leaving at NR for now.

This works very well in Safari, and it's a nice UI improvement.

The combination of the resize bar/handle and the automatic resizing is a little awkward however. If you resize the textarea manually to either a smaller or larger size and then type something, the automatic resizing kicks in and overrides your chosen size.

I think I agree that with this feature we don't need the resize bar at all, but some may not like such a change. So how about a setting like this:

Resizable text areas
(*) Automatically resize textareas to its content.
    If you choose this option, the height of text areas will automatically be adjusted to fit the contained 
    text while the user types.
( ) Allow users to manually resize textareas.
    If you choose this option, a resize handle will be shown at the bottom of text areas which allows 
    users to manually adjust the height of the text areas (the standard behavior in Drupal 6).
( ) Disable resizable text areas.
    Choose this option if you don't want to allow for any resizing of text areas.

Or would this be adding too much cruft to the configuration screens?

A code review is forthcoming, once we sort out these questions.

Sounds cool! Haven't had a chance to try it out yet.

Could we get a couple of screenshots or a demo site, please, so that people who can't apply patches could give it a visual review?

I notice the patch is only adding things; if we're removing the old resizing behaviour shouldn't it also be removing some code/images/etc?

There's already an issue for this at #111308: Add auto-expand feature to textareas which had a fair bit of review and discussion already but hasn't been updated for six months. Not sure it makes sense to mark this one as duplicate since I haven't compared the approaches yet so leaving them both open for now.

@zoo33 I think exposing those settings would be too much cruft, having them defined by (unexposed) variables or easy to override with contrib makes sense though.

Sounds like this needs work. Why also can't we adjust the "rows" parameter instead of manually setting a CSS height?

Why is it beneficial to never see scrollbars on a node body field?

Well never is probably saying too much, especially for larger texts, as discussed above. But having the form adapt according to the user input makes sense. This makes node/edit pages much nicer (even more than node/add) because the text fills the whole textbox, and there is neither a lot of unused space nor a scrollbar for just a few lines, which could have easily fit onto the page.
The height of that textbox is something you can't solve correctly for every use-case, therefore making it adapt to the user is a great usability improvement. Therefore +1 on the concept.

Does anything else need to be done to make this work? I applied the patch, but my forms don't dynamically resize.

I noticed too, that misc/textarea.js wasn't actually loaded in my source, so I added drupal_add_js('misc/textarea.js') to my template.php file, but still no go.

Do I need to load anything else, or do it some other way? (drupal 7 btw).

It would be nice to see an updated demo of this in action. Maybe we can make it work in a good way, but that will take some iterations to refine it. We have to experience it to know if it works.

I was looking around to see if this functionality was in a module before I rolled my own. It seems like it would be a great UI add for many situations, but should probably be configurable for times when it would not be. This issue has been dead for a while, so let's take stock.

If we are combining #111308: Add auto-expand feature to textareas, it seems like the functionality wish list is:

1. Add new lines as the content fills the text area.
2. Stop adding lines when the text area reaches the height of the browser window, minus some padding.
3. Shrink textarea as content is removed.

The ux wish list is:

1. Ease/animate new rows into view.

And the questions are:

1. Remove handle for resize, or allow user resize?
2. Remove added lines on deletion of content?
3. Two to three line buffer between bottom of textarea or allow text to lie flush?
4. What js approach to use: counting rows, container div and newline addition, or other?
5. What fields should this be applied to? Configurability?

Recently there was an article on A List Apart that demo'd a method for resizing that doesn't require font size or line height assumptions or calculations, instead using a mirrored <pre> tag. This is what I was going to experiment with -- I don't know performance implications if there are 20 textareas on a node edit page, but it seems like a valid alternative to look into re: question #4.

Realistically I'm not going to play around with this for another month or so, just adding this comment if the ops want to resurrect this issue, and if not for my own safe keeping.

[edit] Looks like there's a sandbox project using the ALA method here: http://drupal.org/sandbox/minorOffense/1328318.

Nothing to review

I'm not sure this should be in core. It's really slick to use but it's something easy for contrib to add. How well does this work on mobile? I'm postponing since I don' t have time to work on it. If someone is up for it feel free to grab it :)

Last call for this feature I guess.

I've created a D7 module for this: https://www.drupal.org/sandbox/modstore/2299225 which uses this library: http://www.jacklmoore.com/autosize/

If anyone finds it useful, review here to get it approved as a full project: https://www.drupal.org/node/2299275. Cheers.

#2239419: Include CKEditor's AutoGrow plug-in supersedes this I think?

@yoroy, I don't think #2239419: Include CKEditor's AutoGrow plug-in supersedes this one, as this deals with textareas while the other with CKEditor.

I also think this is not a duplicate, and I think Drupal core would be better for this. However, the approach above will not work for Drupal 8, since textarea.js has been removed from core in favor of CSS resize property (https://www.drupal.org/node/1465840). Is there still interest in this? I could put together a proposal and possibly a patch for D8 core.

@dnotes, thanks for jumping in, I would be very happy to see an outline of the approach.

This won't be on my task list until December, but if there's no motion on it before then I'll put something together. A demo would be e.g. here: https://codepen.io/vsync/pen/frudD

FYI, this module will be available on drupal.org just as soon as my colleague, gremy, publishes it on d.o:

https://github.com/kalamuna/autogrow_textarea

There's also the Expanding Textareas module now.

There is a contrib module with support of drupal 7 to 9 and this point hasn't come up in usability reviews as far as I know.