Allow resizing <textarea> fields

[Remy Blank]

Most <textarea> fields have a fixed size (except for the wiki editor), and are often quite small. It would be very useful to be able to resize these fields vertically, e.g. using a drag bar.

I know that some browsers have this functionality already. Unfortunately, by far not all (IE and Opera don't, FF needs a plugin).

[Remy Blank]

Patch against 0.11-stable adding resize grips to all <textarea> fields.

[Remy Blank]

trac/htdocs/grip.png

[Remy Blank]

The patch above implements resizing of <textarea> fields, and has been tested to work correctly on:

• Firefox 3.0.8, Opera 9.64, Konqueror 3.5.9 on Linux
• Firefox 3.0.8, Internet Explorer 7.0.5730.13 on Windows
• Safari 3.2.1 on OS X

The only remaining issue is a cosmetic bug in IE 7, because the <textarea> is displayed slightly wider than the containing <div>, and a few pixels of the scrollbar get cut off. If anybody knows how to force IE to display <textarea> fields with the correct width, please drop me a note here. I've been banging my head against a wall for the last hour, and I'm pretty much out of ideas at this point.

[Andreas]

Replying to rblank:

the <textarea> is displayed slightly wider than the containing <div>, and a few > pixels of the scrollbar get cut off. If anybody knows how to force IE to display > <textarea> fields with the correct width, please drop me a note here. I've been > banging my head against a wall for the last hour, and I'm pretty much out of ideas at this point.

ASP Textboxes in table cells are also wider. I usually use 4px padding in the surrounding container:

<td style="padding: 0px 4px 0px 0px">
    <asp:TextBox ID="Name" runat="server" Width="100%" />
</td>

This way everything fits neatly on my Vista and IE7. Maybe this helps in any way with textareas?

[Remy Blank]

#8381 was marked as a duplicate, and contains a patch allowing to change the height of the ticket comment <textarea> with a select box.

[Christian Boos]

0.12 maybe?

[Remy Blank]

Nah, even later. I still haven't found a reliable (i.e. cross-browser) way of getting <textarea>s with the right width, and I've had my share of browser weirdness for now.

[Remy Blank]

Closed #8557 as a duplicate.

[Christian Boos]

See also #8721, where I attached a refreshed patch.

Just noticed that while it works great in general, the Add Comment textarea in the ticket ends up being 2px wide…

[Christian Boos]

… the Add Comment textarea in the ticket ends up being 2px wide…

Simplifying the structure and the styling seems to fix that problem and it still works as expected with the browsers I've tested on Windows (Chrome 4.0, Safari 4.0, FF 3.5, IE8 (+IE7 compat mode), Opera 9 & 10):

trac/htdocs/css/trac.css

@@ -409 +409 @@
 .wikitoolbar a#img { background-position: 0 -128px }
 
 /* Textarea resizer */
-div.trac-resizable { display: table; width: 1px }
-div.trac-resizable > div { display: table-cell }
 div.trac-resizable textarea { display: block; margin-bottom: 0 }
 div.trac-grip {
  height: 9px;
- overflow: hidden;
  background: #eee url(../grip.png) no-repeat center 2px;
  border: 1px solid #ddd;
  border-top-width: 0;

trac/htdocs/js/resizer.js

@@ -3 +3 @@
     var textarea = $(this);
     var offset = null;
 
-    $(this).wrap('<div class="trac-resizable"><div></div></div>')
+    $(this).wrap('<div class="trac-resizable"></div>')
       .parent().append($('<div class="trac-grip"></div>').mousedown(beginDrag));
     var grip = $('div.trac-grip', $(this).parent())[0];
     grip.style.marginLeft = ($(this)[0].offsetLeft - grip.offsetLeft) + 'px';

The only glitches were seen with the new ticket form, for IE8 and Opera 9&10, where the textarea overlaps the boundaries of the ticket… but that's actually also the case without the patch :-)

[Remy Blank]

Replying to cboos:

Just noticed that while it works great in general, the Add Comment textarea in the ticket ends up being 2px wide…

Yes, something must be added for the outer <div> when the <textarea> width is set to 100%. In this case, adding the following line to ticket.css fixes the issue:

#trac-comment-editor div.trac-resizable { width: 100% }

Simplifying the structure and the styling seems to fix that problem and it still works as expected with the browsers I've tested on Windows (Chrome 4.0, Safari 4.0, FF 3.5, IE8 (+IE7 compat mode), Opera 9 & 10)

No no, this outer <div> is there for a reason ;-) Try the following:

• Un-maximize your browser window (e.g. Firefox or Opera).
• Load a page where the <textarea> doesn't have a width of 100% (e.g. the "Admin - Basic Settings" page).
• Resize the browser window horizontally.

You will see that the drag bar width follows the width of the browser window with your change, whereas it doesn't if you keep the outer <div>. Believe me, I've been finding all kinds of weird things while implementing this feature, and that's the reason why I postponed this ticket.

The last issue that was preventing me from committing the feature was that IE7 sets the width of the outer <div> to 1px instead of wrapping the <textarea>. This introduces a calculation error for the width of the drag bar, and it ends up being slightly narrower than the <textarea>. Only a cosmetic issue.

Now, testing on IE8 shows that the issue has been resolved, and everything works perfectly well. Yay! So I'd be ready to commit the feature. I'll attach a completely up-to-date patch.

[Remy Blank]

Updated patch against trunk.

[Christian Boos]

I give up with my alternative approach using inline-block… it was nearly working, but needed too many margin adjustments, plus the #trac-comment-editor was resisting…

So, let's go for table / table-cell ;-)

[Remy Blank]

Replying to cboos:

I give up with my alternative approach using inline-block…

He he… See, I told ya! ;-)

[Remy Blank]

Committed in [8872].

[tyler.miranda@…]

I'm pretty new to Trac…and I'm trying to figure out how to install this patch. I'm using Windows (not by choice) and I've installed Gnuwin32 and tried to apply the patch from the cli but it just hangs. am I missing something?

[Christian Boos]

Replying to tyler.miranda@…:

… am I missing something?

Yes…

• please don't change milestone values arbitrarily, that's our job ;-)
• Vista UAC doesn't like programs named "patch", "install" or anything else; just rename your patch.exe to something else, "tapch.exe" for example;
• the patch likely won't apply without conflicts, you better have to understand the changes (basically adding a trac-resizable class to the textareas, adding the resizer.js when needed) and reproduce them manually;
• 0.11-stable is mostly frozen now; it will only get critical fixes if there's a need, and certainly not new features like this one.

[Remy Blank]

…and please use the IrcChannel or the MailingList for support requests.

[anatoly techtonik <techtonik@…>]

There should be an ability to resize form vertically as well before this becomes an official 0.12 "API". It is needed in Bitten [1]. Visually current bar looks like StackOverflow control, which in turn seems to be used in Facebook. Trac could be more original. There are some more appealing guides and vertical resize in links in the ticket linked below.

[1] See ​http://bitten.edgewall.org/ticket/563#comment:3

[Remy Blank]

I don't understand your request. When you say "resize vertically", did you actually mean "horizontally"? I think this is neither desired, nor necessary. Text areas that need a lot of space horizontally should be set to grow with the page anyway, similar to the wiki page editor.

We could be more original, but then again, the current implementation is pretty much exactly what we need, and making it look more fancy won't buy us anything (besides the fact that I like sober interfaces better, but that's a personal preference).

Also, I don't understand what prevents Bitten from using the current implementation. Adding the trac-resizable class to the <textarea>s (and possibly calling Chrome.add_textarea_grips()) should be all that's needed. Of course, adding line numbers is another story.

Re-closing as "goodenoughforme".

[Christian Boos]

Remy, you beat me to it ;-)

Replying to anatoly techtonik <techtonik@…>:

There should be an ability to resize form vertically as well before this becomes an official 0.12 "API".

That's a further enhancement request. I suppose you meant "horizontally", as vertical resizing does work as advertised.

It is needed in Bitten [1]. Visually current bar looks like StackOverflow control, which in turn seems to be used in Facebook. Trac could be more original. There are some more appealing guides and vertical resize in links in the ticket linked below.

[1] See ​http://bitten.edgewall.org/ticket/563#comment:3

Feel free to propose a patch and we might consider it, if it really enhances what we currently have (which is quite good and fitting to the Trac look and feel, which can't be said for any of the proposed examples).