Textareas that grow (was: Re: XForms and multi-line text entry)

Dave,

[...]

> I have a further suggestion, which is to allow application authors
> the ability to control whether a multiline text input control grows
> in height to accomodate the text it contains, or whether it clips
> and offers some means of scrolling through its contents.

It has been my experience as well that the fixed height of a textarea
has an implication on the amount of text being entered by the form
user - although this is sometimes (or often) not the intent of the
form author.

Indicating / constraining the expected amount of text by
setting a fixed height on the textarea is a bug in this case,
and multi-line text entry fields that 'grow' would be the
desirable behaviour: Dynamically increasing the text entry
field when line breaks occur or enter is triggered causing
the UI to reflow / adjust itself accordingly, making it indifferent
to the user how much text is entered from a UI perspective.

> I believe that this is a matter of applying the appropriate CSS
> property, and will involve some coordination with the CSS working
> group.

Good news, no coordination needed with the CSS WG for this,
it already works. This feature is already covered by XForms 1.0
in combination with CSS 3 UI [1].

> Text input areas that grow as you type are a nice feature
> since users are in control of what they see and aren't subject
> to the imposition by authors of a fixed display area that
> limits the number of lines visible. In other words, users can
> glance up and see what they typed without being required to
> scroll through the text within the text input control.

I can show this to you and everyone who is interested in
actually experiencing this behaviour:

Here is an XHTML document with an XForms textarea:
http://claus.packts.net/deng/examples/xforms/textarea_nostyle.html

You can make it render via the DENG web service if you have
Flash 6 installed in your browser:
http://claus.packts.net/deng/deng_test.php?f=examples/xforms/textarea_nostyl
e.html

The "Address" field xforms:textarea in this example grows
or reduces itself depending on the size in terms of line breaks
and carriage returns of the text entered by the form user,
with the all the implications for the following UI layout in
the form, which gets pushed down when the field
grows and moves back up again when the textarea reduces
its size.

The full integration of the CSS box model with XForms in
XHTML makes this behaviour possible today. CSS 3 UI
defines the "::value" pseudo-element that allows access
to the actual text entry field as if it was any (block or inline)
element in the UI tree, while this element doesn't physically
exist in the XHTML UI but is derived from the XForms
model's instance via the ref attribute on xforms:textarea.

This growing textarea behaviour happens to naturally fall
out as the default behaviour when XForms is integrated
into XHTML and implemented in a user agent that has a
full CSS box model implementation for XHTML including
XForms, together with the XForms-relevant parts of
CSS 3 UI.

The "textarea::value" pseudo element can then be set to
either behave as any block level element preserving
whitespace (e.g. as the user agent default stylesheet for
XForms in XHTML), or to behave just as the previous,
existing HTML forms textareas by setting a fixed height
and scrolling thru CSS (e.g. custom textarea UI behaviour
defined by the form author via CSS):

textarea::value {
    height: 3em;
    overflow: scroll;
   }

... gives a fixed textarea with e.g. three rows and scollbars.

Thanks for all your great suggestions and ideas, Dave!

- Sebastian

[1] http://www.w3.org/TR/css3-ui/

Received on Monday, 21 July 2003 12:49:03 UTC