<?xml-stylesheet href="xsltforms/xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="yes"?>
<html
   xmlns="http://www.w3.org/1999/xhtml"
   xmlns:xf="http://www.w3.org/2002/xforms" 
   xmlns:xs="http://www.w3.org/2001/XMLSchema" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	 >
   <head>
      <title>Controlling Input Field Width</title>
      <style type="text/css">
   @namespace xf url("http://www.w3.org/2002/xforms");
   body {
      font-family: Helvetica;sans-serif;
   }
 
   label, legend {
      font-weight: bold;
   }
 
   /* The default field width for all inputs */
   .xforms-value {
      width: 100px
   }
 
   /* custom field width overrides relative to current font size */
   /* ex is the size of the current lowercase 'x' in pixels */
   /* em is the size of the current "M" character in pixels */
   .PersonGivenName .xforms-value {width:20ex}
   .PersonMiddleName .xforms-value {width:15ex}
   .PersonSurName .xforms-value {width:25ex}
   .LocationCityName .xforms-value {width:20ex}
   .LocationStateCode .xforms-value {width:2em}
   .LocationPostalID .xforms-value {width:10ex}
   </style>
      <xf:model>
         <xf:instance>
            <Data xmlns="">
               <PersonGivenName>John</PersonGivenName>
               <PersonMiddleName>George</PersonMiddleName>
               <PersonSurName>Doe</PersonSurName>
               <LocationCityName>Anytown</LocationCityName>
               <LocationStateCode>MM</LocationStateCode>
               <LocationPostalID>55123-1234</LocationPostalID>
            </Data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <fieldset>
      <legend>Name and Address</legend>
       <xf:input class="PersonGivenName" ref="/Data/PersonGivenName" incremental="true">
         <xf:label>First:</xf:label>
       </xf:input>
       <xf:input class="PersonMiddleName"  ref="/Data/PersonMiddleName" incremental="true">
         <xf:label>Middle:</xf:label>
       </xf:input>
       <xf:input class="PersonSurName" ref="/Data/PersonSurName" incremental="true">
         <xf:label>Last:</xf:label>
       </xf:input>
       <br/>
       <xf:input class="LocationCityName" ref="/Data/LocationCityName" incremental="true">
         <xf:label>City:</xf:label>
       </xf:input>
       <xf:input class="LocationStateCode" ref="/Data/LocationStateCode" incremental="true">
         <xf:label>State:</xf:label>
       </xf:input>
       <xf:input class="LocationPostalID" ref="/Data/LocationPostalID" incremental="true">
         <xf:label>Postal:</xf:label>
       </xf:input>
       </fieldset>
 
       <xf:output ref="/Data/PersonGivenName">
         <xf:label>First Name:</xf:label>
       </xf:output>
       <br/>
       <xf:output ref="/Data/PersonMiddleName">
         <xf:label>Middle Name:</xf:label>
       </xf:output>
       <br/>
       <xf:output ref="/Data/PersonSurName">
         <xf:label>Last Name:</xf:label>
       </xf:output>
        <br/>
        <xf:output ref="/Data/LocationCityName">
         <xf:label>City Name:</xf:label>
       </xf:output>
        <br/>
       <xf:output ref="/Data/LocationStateCode">
         <xf:label>State Code:</xf:label>
       </xf:output>
       <br/>
       <xf:output ref="/Data/LocationPostalID">
         <xf:label>Postal Code:</xf:label>
       </xf:output>
       <br/>
   </body>
</html>
