XForms/Inline Repeats

Motivation
Most computer displays are wider then they are high. So to take advantage of this you sometimes want to grow form data to the right, not down. To do this you must add CSS instructions to use an "inline" display for items within a repeat.

Method
CSS has two "display" options:
 * 1)   adds new elements vertically so the left edge is aligned.
 * 2)   is horizontal placement where new divs gets added to the right just like new text is added to an input field.

The new elements get added to the current row. By default XForms used a block repeat. But this can be easily changed with a two stylesheet command.

In FireFox the class to modify the attributes of the repeated item is  . Other XForms players may use a different CSS element.

Executable XForms Application
Load XForms Application

Source Code
  Inline Repeat       

Discussion
In the example above we note that the widths of each cell is determined by the size of the label. Each cell can have a different label. Note that we create a wrapper for each cell using a div. Both the cell wrapper and the .xf-fepeat-item must be set to be display:inline.

Adding Two Dimensional Nesting
You can nest repeat groups to create grids of cells. Just make the outer repeat have class attribute to adjust the line height.



Source Code
  Inline Repeat            

CSS
The following CSS will be needed to display a each row on a new line:

Scoreboard Example
The following example shows how you can put text in before and after the inner repeat.



Dolphins Bears <team-name>Cubs</team-name> </xf:instance> <xf:bind nodeset="row/total" calculate="sum(../score)"/> </xf:model> XForms Scoreboard <xf:repeat nodeset="row" class="row"> <xf:output ref="team-name" class="team-name"/> <xf:repeat nodeset="score"> <xf:output ref="." class="score"/> </xf:repeat> <xf:output ref="total" class="total"/> </xf:repeat>

Repeats into CSS display tables
Get the table to align using CSS.

Here is an example: