Skip to content

Instantly share code, notes, and snippets.

@dmccreary

dmccreary/xforms-css-label-layout.xml

Last active August 29, 2015 13:56
Show Gist options
  • Save dmccreary/8927908 to your computer and use it in GitHub Desktop.
Save dmccreary/8927908 to your computer and use it in GitHub Desktop.
Download ZIP
XForms CSS to control label layout style: top, left align and right align
Raw
xforms-css-label-layout.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 Label Layout Styles</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 .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: 12ex;}
/* 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: 25ex;}
*/
.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;}
</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="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 label-left span4 ">
<h4>Left Aligned Labels</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>
<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 Aligned Labels</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>
<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