Skip to content

Instantly share code, notes, and snippets.

@dmccreary

dmccreary/xforms-css-display-borders.xml

Created February 11, 2014 03:09
Show Gist options
  • Save dmccreary/8928657 to your computer and use it in GitHub Desktop.
Save dmccreary/8928657 to your computer and use it in GitHub Desktop.
Download ZIP
XForms CSS example of turning on element borders to see box model for each page region.
Raw
xforms-css-display-borders.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:fr="http://orbeon.org/oxf/xml/form-runner" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xxf="http://orbeon.org/oxf/xml/xforms">
<head>
<title>XForms CSS Wireframe with Visible Borders</title>
<xf:model>
<xf:instance xmlns="">
<data>
<myNumber1></myNumber1>
<myNumber2>abc</myNumber2>
<myNumber3>-1</myNumber3>
<myNumber4>101</myNumber4>
</data>
</xf:instance>
<xf:bind ref="*">
<xf:constraint id="required" value=". ne ''"/>
</xf:bind>
<xf:bind ref="*">
<xf:constraint id="decimal" value=". castable as xs:decimal"/>
</xf:bind>
<xf:bind id="positive" ref="*" constraint="if (. castable as xs:decimal) then xs:decimal(.) gt 0 else true()"/>
<xf:bind id="under100" ref="*" constraint="if (. castable as xs:decimal) then xs:decimal(.) le 100 else true()"/>
</xf:model>
<style type="text/css">
.container {border: solid blue 1px;}
.fieldset {border: solid cyan 1px; margin: 5px 20px;}
.xforms-control {border: solid green 1px; margin: 10px;}
.xforms-label {border: solid orange 1px;}
.xforms-control .xforms-input-input {width: 15ex; text-align: right; border: solid purple 2px!important; }
.xforms-alert {border: solid red 1px;}
.xforms-control {display:block;padding:5px;}
.xforms-control .xforms-label {display:inline-block; width:15ex; text-align:right; font-weight:bold;}
.orbeon .xforms-alert.xforms-active {display: inline-block!important; width: 345px; padding: 2px;}
.center {text-align:center;}
</style>
</head>
<body>
<div class="span12">
<p class="center">Borders Color Key: container:blue, fieldset:cyan, controls:green, labels:orange, inputs:purple, alerts:red</p>
<div class="row span12">
<div class="fieldset span5">
<h4>Fieldset 1</h4>
<xf:input ref="myNumber1">
<xf:label>Enter Amount:</xf:label>
<xf:hint>Must be positve</xf:hint>
<xf:help>Enter a positve decimal number with two digits. You do not need to enter a dollar sign or commas.</xf:help>
<xf:alert validation="required">Error: This field is required</xf:alert>
<xf:alert validation="decimal">Error: Must be a valid decimal number</xf:alert>
<xf:alert validation="positive">Error: Must be a positive number</xf:alert>
<xf:alert validation="under100">Error: Must be under 100</xf:alert>
</xf:input>
<xf:input ref="myNumber2">
<xf:label>Enter Amount:</xf:label>
<xf:hint>Must be positve</xf:hint>
<xf:help>Enter a positve decimal number with two digits. You do not need to enter a dollar sign or commas.</xf:help>
<xf:alert validation="required">Error: This field is required</xf:alert>
<xf:alert validation="decimal">Error: Must be a valid decimal number</xf:alert>
<xf:alert validation="positive">Error: Must be a positive number</xf:alert>
<xf:alert validation="under100">Error: Must be under 100</xf:alert>
</xf:input>
</div>
<div class="fieldset span5">
<h4>Fieldset 2</h4>
<xf:input ref="myNumber3">
<xf:label>Enter Amount:</xf:label>
<xf:hint>Must be positve</xf:hint>
<xf:help>Enter a positve decimal number with two digits. You do not need to enter a dollar sign or commas.</xf:help>
<xf:alert validation="required">Error: This field is required</xf:alert>
<xf:alert validation="decimal">Error: Must be a valid decimal number</xf:alert>
<xf:alert validation="positive">Error: Must be a positive number</xf:alert>
<xf:alert validation="under100">Error: Must be under 100</xf:alert>
</xf:input>
<xf:input ref="myNumber4">
<xf:label>Enter Amount:</xf:label>
<xf:hint>Must be positve</xf:hint>
<xf:help>Enter a positve decimal number with two digits. You do not need to enter a dollar sign or commas.</xf:help>
<xf:alert validation="required">Error: This field is required</xf:alert>
<xf:alert validation="decimal">Error: This field is required</xf:alert>
<xf:alert validation="positive">Error: Must be a positive number</xf:alert>
<xf:alert validation="under100">Error: Must be under 100</xf:alert>
</xf:input>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment