Neil's Place

September 1, 2009

Resizing Text Boxes

Filed under: Mozilla — enndeakin @ 7:42 pm

In bug 167951, I am implementing text areas which can be resized, which will look something like the following:

The notch in the corner will allow the box to be resized smaller and larger. This will be available for all HTML <textarea> elements as well as XUL multiline textbox elements. However, for XUL elements, a resizable attribute set to either true or false may be used to enable or disable this feature. The default is false as it is likely that multiline textboxes in dialog boxes won’t have room to be resized anyway.

Adding support for this feature involved adding a number of other XUL features. The first, in bug 510335, adds support to the <stack> element for right and bottom attributes, in addition to supporting left as top as it does currently. This allows alignment of the children of a stack to any of the four sides by specifying a margin. For instance, this example positions a button 10 pixels from the right edge and 5 pixels from the bottom edge.

<stack width="100" height="100">
  <button label="Hello" right="10" bottom="5"/>

You can also specify all four positions, and they then just act like margins from the stack’s edge.

The second feature is extending the <resizer> element in bug 511180 to allow resizing any element. Currently, the <resizer> is always used to resize the window. You can see this kind of resizing notch in use in Firefox in the lower right corner of a window below the scrollbar.

But, by adding an element attribute, you can specify the id of a specific element to resize. Most common, you would use the special value ‘_parent’ which means to resize the parent element. The following pattern might be common:

  <button label="Resizable"/>
  <resizer dir="bottomend" right="0" bottom="0" element="_parent"/>

All of these features are works in progress, so note that the specifics may change.



  1. I don’t understand why it defaults to false for XUL textareas. Can’t you just resize the dialog after resizing the textarea, the same way the dialog sizes itself when first opened? XUL tends to do a better job of dealing with unknown element sizes than HTML.

    Comment by Jesse Ruderman — September 1, 2009 @ 8:40 pm

  2. Hmm this looks familiar. 😉 Hehe, always good to see good features in one browser adopted by others.

    Comment by Dan — September 1, 2009 @ 8:54 pm

    • Look at the bug, it was opened in 2002 😉 The parity-Safari was added in 2007 and parity-Chrome was added in 2008.

      Neil, the resize will not persist will they?

      Comment by Kurt (supernova_00) — September 1, 2009 @ 10:37 pm

  3. Will this use the CSS3 “resize” property? (like Safari and such use), because the default value for that is “none” but Safari defaults it to “both” (last time I checked)

    If the textbox doesn’t have max-width/height set on it, it means you can resize the textbox as much as you want, breaking websites in the process.

    Of course, it’s nice to be able to resize any textbox, so there’s downsides to both defaults.

    Comment by Alex — September 2, 2009 @ 1:26 am

  4. Would there be a way to allow resizing only in one direction, e.g. only in X-dir or only in Y-dir?

    Comment by Vladimir Dzhuvinov — September 2, 2009 @ 6:25 am

  5. When in XUL, how will resizing the textbox affect the layout of the surrounding elements? Will it make the window larger, cause the contents to be bigger than the window, or… something else? (Will whether or not nearby things had flex= change anything?)

    Comment by Mook — September 2, 2009 @ 6:31 am

  6. Neil, how about having an option to disable resizing horiztonally and vertically. I’m thinking horizontal resizing would break more pages than vertical resizing.

    Comment by Kurt (supernova_00) — September 2, 2009 @ 11:09 am

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog at

%d bloggers like this: