Skip to content

Instantly share code, notes, and snippets.

@dmccreary

dmccreary/xforms-css-required-fields.xml

Created February 11, 2014 05:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dmccreary/8929664 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dmccreary/8929664 to your computer and use it in GitHub Desktop.
Download ZIP
XForms CSS for styling required fields using three types of label layout styles: top, left and right.
Raw
xforms-css-required-fields.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 Minimal Template</title>
<xf:model>
<xf:instance xmlns="">
<data>
<first-name>Sue</first-name>
<middle-name></middle-name>
<last-name>Johnson</last-name>
<phone></phone>
<state>MN</state>
<postalcode>12345</postalcode>
</data>
</xf:instance>
<xf:bind id="required" ref="first-name, last-name, city, state, postalcode" required="true()"/>
</xf:model>
<style type="text/css">
.orbeon .form {background-color:#EEE; margin:3px; padding: 5px; border: solid gray 1px;}
.orbeon .xforms-control .xforms-label {font-weight: bold;}
/* make controls be their own blocks */
.orbeon .label-left .xforms-control, .orbeon .label-right .xforms-control {display:block;line-height:35px;}
.orbeon .label-left .xforms-control .xforms-label, .orbeon .label-right .xforms-control .xforms-label {display:inline-block; width: 14ex;}
/* used to control the width of all input fields */
.orbeon .label-left .xforms-control .xforms-input-input, .orbeon .label-right .xforms-control .xforms-input-input {width: 23ex;}
.orbeon .label-left .xforms-control .xforms-label
{text-align:left;}
.orbeon .label-right .xforms-control .xforms-label
{text-align:right;}
/* turn these on for variable with forms
.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 .right-label .xforms-control .xforms-label {display:inline-block; text-align:right; padding:5px;}
.orbeon .xforms-required .xforms-input-input {background-color: lightyellow; border: solid black 1px;}
.orbeon .xforms-required .xforms-label:after { content:"*"; color: red; font-size: 16pt; margin-right: 5px;}
</style>
</head>
<body>
<div class="container span12">
<div class="form span3">
<h4>Top Labels</h4>
<xf:input ref="first-name">
<xf:label>First Name:</xf:label>
</xf:input>
<xf:input ref="middle-name" class="middle-name">
<xf:label>Middle Name:</xf:label>
</xf:input>
<xf:input ref="last-name">
<xf:label>Last Name:</xf:label>
</xf:input>
<xf:input ref="phone">
<xf:label>Phone:</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 label-left span4 ">
<h4>Left Labels</h4>
<xf:input ref="first-name" class="first-name">
<xf:label>First Name:</xf:label>
</xf:input>
<xf:input ref="middle-name" class="middle-name">
<xf:label>Middle Name:</xf:label>
</xf:input>
<xf:input ref="last-name" class="last-name">
<xf:label>Last Name:</xf:label>
</xf:input>
<xf:input ref="phone">
<xf:label>Phone:</xf:label>
</xf:input>
<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 label-right span4">
<h4>Right Labels</h4>
<xf:input ref="first-name" class="first-name">
<xf:label>First Name:</xf:label>
</xf:input>
<xf:input ref="middle-name" class="middle-name">
<xf:label>Middle Name:</xf:label>
</xf:input>
<xf:input ref="last-name" class="last-name">
<xf:label>Last Name:</xf:label>
</xf:input>
<xf:input ref="phone">
<xf:label>Phone:</xf:label>
</xf:input>
<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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment