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.

Textarea styled with CSS (Image: Juanecca, CC BY-SA 3.0)

Sample Program

xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">;

XForms textarea demo
rel="stylesheet" type="text/css" href="textarea.css" />

xmlns="">

Default Default Default Default
Small Small Small Small Small Small Small Small Small Small Small
Small Small Small Small Small Small Small
Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium
Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium
Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium
Large Large Large Large Large Large Large Large Large Large Large Large
Large Large Large Large Large Large Large Large Large Large Large Large Large
Large Large Large Large Large Large Large Large Large Large Large Large Large
Large Large Large Large Large Large Large Large Large Large Large Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large

Resizing textarea and scrolling.

ref="Default">
Default:

class="small-textarea" ref="Small">
Small:

class="medium-textarea" ref="Medium">
Medium:

class="large-textarea" ref="Large">
Large:

class="x-large-textarea" ref="XLarge">
X-Large:

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;
}

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.