Styling XForms

Styling repeats as tables are not possible for the moment, so the following will not work (yet).

Repeat table layout

If you have a repeat with a bunch of XForms elements, you may want repeat items and their contents to show up as a proper table. Here are some methods for doing just that:

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

Document Tags and Contributors

Contributors to this page: Dmccreary, Beaufour
Last updated by: Dmccreary,