MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 172104 of Styling XForms

  • Revision slug: Talk:XForms/Styling_XForms
  • Revision title: Styling XForms
  • Revision id: 172104
  • Created:
  • Creator: Beaufour
  • Is current revision? No
  • Comment repeat-table stuff from main page

Revision Content

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.

Revision Source

<div class="note">
<p>Styling repeats as tables are <b>not</b> possible for the moment, so the following will not work (yet).
</p>
</div>
<h4 name="Repeat_table_layout"> Repeat table layout </h4>
<p>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:
</p>
<h5 name="Table-like_hack"> Table-like hack </h5>
<ul><li> Hide labels: <code>xf|repeat xf|label {display: none;}</code>
</li><li> Specify width of each element inside the repeat: <code>xf|repeat &gt; * {width: 10ex;}</code>
</li><li> Float display elements: <code>xf|repeat &gt; xf|output {float: left;}</code>
</li><li> Separate float elements from different repeat indexes: <code>xf|repeat .xf-repeat-item {clear: both;}</code>
</li></ul>
<p>Pros:
</p>
<ul><li> Can be tweaked to look like a table
</li></ul>
<p>Cons:
</p>
<ul><li> No table headers (labels)
</li><li> Doesn't scale with browser window
</li><li> Doesn't scale with content width
</li></ul>
<h5 name="Use_CSS_display_property"> Use CSS <code>display</code> property </h5>
<ul><li> Hide labels: <code>xf|repeat xf|label {display: none;}</code>
</li><li> Style the whole repeat as a table: <code>xf|repeat {display: table}</code>
</li><li> Style each repeat item as a table row: <code>xf|repeat &gt; .xf-repeat-item {display: table-row}</code>
</li><li> Style each XForms control as a table cell: <code>xf|repeat &gt; .xf-repeat-item &gt; * {display: table-cell}</code>
</li></ul>
<p>Pros:
</p>
<ul><li> Looks like a table
</li></ul>
<p>Cons:
</p>
<ul><li> No table headers (labels)
</li></ul>
<h5 name="Use_XForms_appearance_attribute"> Use XForms <code>appearance</code> attribute </h5>
<p>Doesn't work now; maybe never.
</p>
Revert to this revision