Skip to content

Instantly share code, notes, and snippets.

@dmccreary

dmccreary/xforms-css-layout-vertical-horizontal-grid.xml

Created February 11, 2014 01:22
Show Gist options
  • Save dmccreary/8927653 to your computer and use it in GitHub Desktop.
Save dmccreary/8927653 to your computer and use it in GitHub Desktop.
Download ZIP
XForms CSS Layout Examples: Vertical, Horizontal and Grid
Raw
xforms-css-layout-vertical-horizontal-grid.xml
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:fr="http://orbeon.org/oxf/xml/form-runner" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xxf="http://orbeon.org/oxf/xml/xforms">
<head>
<title>XForms CSS Layout Examples - Vertical, Horizontal and Grid Layouts</title>
<xf:model>
<xf:instance xmlns="">
<data>
<first-name>Sue</first-name>
<last-name>Johnson</last-name>
<city>Minneapols</city>
<state>MN</state>
<postalcode>12345</postalcode>
</data>
</xf:instance>
<xf:bind id="limit10chars" ref="*" constraint="string-length(.) le 10"/>
</xf:model>
<style type="text/css">
.orbeon .form {background-color:linen; margin:3px; padding: 5px; border: solid gray 1px;}
.orbeon .horizontal-layout .xforms-control {line-height:35px;}
.orbeon .horizontal-layout .xforms-control, .orbeon .horizontal-layout .xforms-control .xforms-label {display:inline!important; padding:5px;}
.orbeon .xforms-control.first-name .xforms-input-input {width: 10em;}
.orbeon .xforms-control.last-name .xforms-input-input {width: 10em;}
.orbeon .xforms-control.city .xforms-input-input {width: 10em;}
.orbeon .xforms-control.state .xforms-input-input {width: 3em;}
.orbeon .xforms-control.postalcode .xforms-input-input {width: 5em;}
.orbeon .grid-layout .xforms-control .xforms-label {display:inline; padding:5px;}
.orbeon .grid-layout table {margin:0!important; padding:0!important;}
</style>
</head>
<body>
<div class="container span12">
<div class="form span3">
<h4>Vertical Layout</h4>
<xf:input ref="first-name">
<xf:label>First Name:</xf:label>
</xf:input>
<xf:input ref="last-name">
<xf:label>Last Name:</xf:label>
</xf:input>
<xf:input ref="city">
<xf:label>City:</xf:label>
</xf:input>
<xf:input ref="state">
<xf:label>State:</xf:label>
</xf:input>
<xf:input ref="postalcode">
<xf:label>Postal Code:</xf:label>
</xf:input>
</div>
<div class="form span6 horizontal-layout">
<h4>Horizontal Layout</h4>
<xf:input ref="first-name" class="first-name">
<xf:label>First Name:</xf:label>
</xf:input>
<xf:input ref="last-name" class="last-name">
<xf:label>Last Name:</xf:label>
</xf:input>
<br/>
<xf:input ref="city" class="city">
<xf:label>City:</xf:label>
</xf:input>
<xf:input ref="state" class="state">
<xf:label>State:</xf:label>
</xf:input>
<xf:input ref="postalcode" class="postalcode">
<xf:label>Postal Code:</xf:label>
</xf:input>
</div>
<div class="form span6">
<h4>Grid Layout</h4>
<table class="grid-layout">
<tr>
<td>
<xf:input ref="first-name" class="first-name">
<xf:label>First Name:</xf:label>
</xf:input>
</td>
<td>
<xf:input ref="last-name" class="last-name">
<xf:label>Last Name:</xf:label>
</xf:input>
</td>
</tr>
<tr>
<td>
<xf:input ref="city" class="city">
<xf:label>City:</xf:label>
</xf:input>
</td>
<td>
<xf:input ref="state" class="state">
<xf:label>State:</xf:label>
</xf:input>
<xf:input ref="postalcode" class="postalcode">
<xf:label>Postal Code:</xf:label>
</xf:input>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment