Two column layoutTip
TipMenu
Now with added tooltips!
Two column layout with editable table matrix
Various places that require tabular-like layouts but incorporate row by row forms
cannot be placed in a traditional HTML table as this is not xhtml compliant
and breaks cascading in CSS.
So this type of interactive data is presented using a pure CSS element layout approach.
The header row is constructed as a normal <table> adding the
class="matrixTable" and with standard <th> elements.
The table is closed immediately after the header information and plays
no part in the construction of the body of the tabular-like data. The final <th>
element needs to be set to a width of 32px to contain a standard icon button.
Each data row is encapsulated in a div with a class that reflects the
desired number of columns, eg:
5 columns: <div class="matrix5container">
4 columns: <div class="matrix4container">
3 columns: <div class="matrix3container">
The inner div elements will resolve at a width appropriate to the parent
class defintion. For example, in this matrix5Container example, the
child div elements are set to a width of 211px.
| [Heading] | [Heading] | [Heading] | [Heading] | [Heading] |
|---|
Saving a form row fires AjaxFormPost( Form Action , '.updateNotifier' ); which displays a loading notifer and response. Examples of each notifier type:
matrix4Container example:
| [Heading] | [Heading] | [Heading] | [Heading] |
|---|
matrix3Container example:
| [Heading] | [Heading] | [Heading] |
|---|