[Xsltforms-support] Styling problem

[<fr...@fl...>]

Dear all,

I hit a problem on styling an XSLT form. I would like to position the  
input box next to the caption. However, in some cases XSLTForms drops  
a <div class="xforms-group-content"> around the input+caption, that  
gets half as wide as the container div, so the input shows under the  
caption instead of next to it. I cannot style <div  
class="xforms-group-content">, because they are all over the place.  
Defining their width as 100% screws up the form.

In the example are two inputs, the first one styles OK, the second one not.

Did any of you hit a similar problem? Any suggestions for a solution?

Thanks,

Fred van Blommestein



XML:

<xf:group ref="instance( 'Catalogue-1' )" model="Catalogue">
  <xf:group class="W24 ABIE" ref="ebcac:ReceiverParty">
   <xf:label class="W12 caption-big-left">Customer</xf:label>
   <xf:group class="W24 BBIE" ref="ebcac:PartyName">
    <xf:label class="W12 caption">Name</xf:label>
    <xf:group class="W24 BBIE">
     <xf:input ref="ebcbc:Name" incremental="true"></xf:input>
    </xf:group>
   </xf:group>
   <xf:group class="W24" ref="ebcac:PostalAddress">
    <xf:group class="W24 BBIE">
     <xf:label class="W12 caption">City</xf:label>
     <xf:input ref="ebcbc:CityName" incremental="true"></xf:input>
    </xf:group>
   </xf:group>
  </xf:group>
</xf:group>

HTML:

<div id="xsltforms-mainform-group-2_2_4_4_1_" class="xforms-disabled  
xforms-group">
  <div class="xforms-group-content">
   <div id="xsltforms-mainform-group-4_2_2_4_4_1_" class="W24 ABIE  
xforms-disabled xforms-group">
    <div xmlns="http://www.w3.org/1999/xhtml"  
id="xsltforms-mainform-label-2_4_2_2_4_4_1_" class="W12  
caption-big-left xforms-label xforms-group-label">Customer</div>
    <div class="xforms-group-content">
     <div id="xsltforms-mainform-group-4_4_2_2_4_4_1_" class="W24 BBIE  
xforms-disabled xforms-group">
     <div xmlns="http://www.w3.org/1999/xhtml"  
id="xsltforms-mainform-label-2_4_4_2_2_4_4_1_" class="W12 caption  
xforms-label xforms-group-label">Name</div>
      <div class="xforms-group-content">
       <div id="xsltforms-mainform-group-4_4_4_2_2_4_4_1_" class="W24  
BBIE xforms-disabled xforms-group">
        <div class="xforms-group-content">
         <span xmlns="http://www.w3.org/1999/xhtml"  
id="xsltforms-mainform-input-2_4_4_4_2_2_4_4_1_"  
class="xforms-disabled xforms-control xforms-input  
xforms-appearance-minimal">
          <span class="value">
           <input type="text" class="xforms-value" />
          </span>
          <span class="xforms-required-icon">*</span>
          <span class="xforms-alert">
          <span class="xforms-alert-icon">&nbsp;</span>
         </span>
        </span>
       </div>
      </div>
     </div>
    </div>
    <div id="xsltforms-mainform-group-6_4_2_2_4_4_1_" class="W24  
xforms-disabled xforms-group">
     <div class="xforms-group-content">
      <div id="xsltforms-mainform-group-2_6_4_2_2_4_4_1_" class="W24  
BBIE xforms-disabled xforms-group">
        <div xmlns="http://www.w3.org/1999/xhtml"  
id="xsltforms-mainform-label-2_2_6_4_2_2_4_4_1_" class="W12 caption  
xforms-label xforms-group-label">City</div>
         <div class="xforms-group-content">
          <span xmlns="http://www.w3.org/1999/xhtml"  
id="xsltforms-mainform-input-4_2_6_4_2_2_4_4_1_"  
class="xforms-disabled xforms-control xforms-input  
xforms-appearance-minimal">
           <span class="value">
            <input type="text" class="xforms-value" />
           </span>
          <span class="xforms-required-icon">*</span>
          <span class="xforms-alert">
          <span class="xforms-alert-icon">&nbsp;</span>
         </span>
        </span>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
</div>
</div>


CSS:

.BBIE {
	display: inline;
	float: left;
	min-height: 30px;
	vertical-align: middle;
	padding: 0px 5px 0px 5px;
	margin: 3px 3px 3px 3px;
border: solid 1px red;
}

.xforms-group-content {
border: solid 1px blue;
}

.W12 {
	width: 47%;
}

.W24 {
	width: 95.7%;
}

.caption {
	font-family: 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	font-weight:200;
	display: inline;
}