XForms/Textarea with style

Motivation
The default layout for a textarea is often not what you want. The size of the textarea may not be correct or the label may not be positioned correctly. This program shows you how to change this.

Screen Image
Here is a sample screen image. The example includes the default textarea and a small, medium, large and extra large version. Note that if the content exceeds the textarea a scroll bar is automatically added to the control.

Sample Program
  Resizing textarea and scrolling.  Default:    Small:    Medium:    Large: </xf:label> </xf:textarea> <xf:textarea class="x-large-textarea" ref="XLarge"> <xf:label>X-Large: </xf:label> </xf:textarea>

Style Sheet (textarea.css)
@namespace xf url("http://www.w3.org/2002/xforms");

/* put each textarea on its own row */ xf|textarea { display: table-row; }

xf|textarea > xf|label { display: table-cell; font-family: sans-serif; font-size: 10pt; font-weight: bold; vertical-align: top; text-align: right; padding-right: 3px; }

textarea { font-family: Courier, sans-serif; } .default-textarea { font-style :regular; } .small-textarea textarea { height: 4.4em; /* a bit less than four lines to demonstrate scrolling */ width: 300px; }

.medium-textarea textarea { height: 6em; width: 400px; }

.large-textarea textarea { font-family: Courier, sans-serif; height: 10em; width: 500px; }

.x-large-textarea textarea { font-family: Courier, sans-serif; height: 20em; width: 700px; }