Edgewall Software
Modify

Opened 9 years ago

Closed 8 years ago

Last modified 8 years ago

#8216 closed enhancement (fixed)

Allow resizing <textarea> fields

Reported by: Remy Blank Owned by: Remy Blank
Priority: normal Milestone: 0.12
Component: rendering Version: 0.12dev
Severity: normal Keywords: patch
Cc:
Release Notes:
API Changes:

Description

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

Attachments (3)

8216-textarea-resize-r8126.patch (15.1 KB ) - added by Remy Blank 9 years ago.
Patch against 0.11-stable adding resize grips to all <textarea> fields.
grip.png (162 bytes ) - added by Remy Blank 9 years ago.
trac/htdocs/grip.png
8216-textarea-resize-r8861.patch (19.5 KB ) - added by Remy Blank 8 years ago.
Updated patch against trunk.

Download all attachments as: .zip

Change History (21)

Changed 9 years ago by Remy Blank

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

Changed 9 years ago by Remy Blank

Attachment: grip.png added

trac/htdocs/grip.png

comment:1 Changed 9 years ago by Remy Blank

Keywords: patch added
Status: newassigned

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.

comment:2 in reply to:  1 Changed 9 years ago by 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?

comment:3 Changed 9 years ago by 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.

comment:4 Changed 8 years ago by Christian Boos

0.12 maybe?

comment:5 Changed 8 years ago by Remy Blank

Milestone: 0.11.60.12.1

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.

comment:6 Changed 8 years ago by Remy Blank

Closed #8557 as a duplicate.

comment:7 Changed 8 years ago by Christian Boos

Milestone: next-minor-0.12.x0.12

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…

comment:8 in reply to:  7 Changed 8 years ago by 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

    diff --git a/trac/htdocs/css/trac.css b/trac/htdocs/css/trac.css
    a b  
    409409.wikitoolbar a#img { background-position: 0 -128px }
    410410
    411411/* Textarea resizer */
    412 div.trac-resizable { display: table; width: 1px }
    413 div.trac-resizable > div { display: table-cell }
    414412div.trac-resizable textarea { display: block; margin-bottom: 0 }
    415413div.trac-grip {
    416414 height: 9px;
    417  overflow: hidden;
    418415 background: #eee url(../grip.png) no-repeat center 2px;
    419416 border: 1px solid #ddd;
    420417 border-top-width: 0;
  • trac/htdocs/js/resizer.js

    diff --git a/trac/htdocs/js/resizer.js b/trac/htdocs/js/resizer.js
    a b  
    33    var textarea = $(this);
    44    var offset = null;
    55
    6     $(this).wrap('<div class="trac-resizable"><div></div></div>')
     6    $(this).wrap('<div class="trac-resizable"></div>')
    77      .parent().append($('<div class="trac-grip"></div>').mousedown(beginDrag));
    88    var grip = $('div.trac-grip', $(this).parent())[0];
    99    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 :-)

comment:9 in reply to:  7 Changed 8 years ago by 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.

Changed 8 years ago by Remy Blank

Updated patch against trunk.

comment:10 Changed 8 years ago by 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 ;-)

comment:11 in reply to:  10 Changed 8 years ago by Remy Blank

Replying to cboos:

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

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

comment:12 Changed 8 years ago by Remy Blank

Resolution: fixed
Status: assignedclosed

Committed in [8872].

comment:13 Changed 8 years ago by tyler.miranda@…

Milestone: 0.120.11.7
Version: none0.11rc1

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?

comment:14 in reply to:  13 Changed 8 years ago by Christian Boos

Milestone: 0.11.70.12
Version: 0.11rc10.12dev

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.

comment:15 Changed 8 years ago by Remy Blank

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

comment:16 Changed 8 years ago by anatoly techtonik <techtonik@…>

Resolution: fixed
Status: closedreopened

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

comment:17 Changed 8 years ago by Remy Blank

Resolution: fixed
Status: reopenedclosed

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".

comment:18 in reply to:  17 Changed 8 years ago by 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).

Modify Ticket

Change Properties
Set your email in Preferences
Action
as closed The owner will remain Remy Blank.
The resolution will be deleted.
to The owner will be changed from Remy Blank to the specified user.

Add Comment


E-mail address and name can be saved in the Preferences .

 
Note: See TracTickets for help on using tickets.