XForms/Textarea with style

From Wikibooks, open books for an open world
Jump to navigation Jump to search

Motivation[edit | edit source]

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[edit | edit source]

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

Sample Program[edit | edit source]

<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms">
   <head>
      <title>XForms textarea demo</title>
      <link rel="stylesheet" type="text/css" href="textarea.css" />
      <xf:model>
         <xf:instance xmlns="">
            <data>
               <Default>Default Default Default Default</Default>
               <Small>Small 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 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 Large</Large>
               <XLarge>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</XLarge>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <p>Resizing textarea and scrolling.</p>
      <xf:textarea ref="Default">
         <xf:label>Default: </xf:label>
      </xf:textarea>
      <xf:textarea class="small-textarea" ref="Small">
         <xf:label>Small: </xf:label>
      </xf:textarea>
      <xf:textarea class="medium-textarea" ref="Medium">
         <xf:label>Medium: </xf:label>
      </xf:textarea>
      <xf:textarea class="large-textarea" ref="Large">
         <xf:label>Large: </xf:label>
      </xf:textarea>
      <xf:textarea class="x-large-textarea" ref="XLarge">
         <xf:label>X-Large: </xf:label>
      </xf:textarea>
   </body>
</html>

Style Sheet (textarea.css)[edit | edit source]

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

Discussion[edit | edit source]

References[edit | edit source]

Next Page: Checkbox | Previous Page: Textarea
Home: XForms