Styling XForms

Table-like hack

• Hide labels: xf|repeat xf|label {display: none;}
• Specify width of each element inside the repeat: xf|repeat > * {width: 10ex;}
• Float display elements: xf|repeat > xf|output {float: left;}
• Separate float elements from different repeat indexes: xf|repeat .xf-repeat-item {clear: both;}

Pros:

• Can be tweaked to look like a table

Cons:

• No table headers (labels)
• Doesn't scale with browser window
• Doesn't scale with content width

Use CSS display property

• Hide labels: xf|repeat xf|label {display: none;}
• Style the whole repeat as a table: xf|repeat {display: table}
• Style each repeat item as a table row: xf|repeat > .xf-repeat-item {display: table-row}
• Style each XForms control as a table cell: xf|repeat > .xf-repeat-item > * {display: table-cell}

Pros:

• Looks like a table

Cons:

• No table headers (labels)

Use XForms appearance attribute

Doesn't work now; maybe never.

Example from Wikibook

Here is an example from the Wikibook of using inline repeats:

Process Step Editor