xsltforms-support

[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;
}

Re: [Xsltforms-support] Styling problem

[Alain C. <ala...@ag...>]

Hello Fred,

> 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.
For each group, a <div class="xforms-group-content"> is always created. 
I check with your test case and it sounds OK for me.
>
> In the example are two inputs, the first one styles OK, the second one 
> not.
The rendering for the first one and the second one are different because 
the corresponding labels are not located identically. For the first one, 
the corresponding label is located in the grand-parent group. For the 
second one, the corresponding label is located in the parent group.
>
> Did any of you hit a similar problem? Any suggestions for a solution?
>
Did you try to associate the label directly to the corresponding input 
control? XForms 2.0 does not yet specify xforms:label/@for and this is 
not implemented in latest build of XSLTForms.

Thank you for your feedbacks!

-Alain

Re: [Xsltforms-support] Styling problem

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

Thanks, Alain,

> The rendering for the first one and the second one are different  
> because the corresponding labels are not located identically. For  
> the first one, the corresponding label is located in the  
> grand-parent group. For the second one, the corresponding label is  
> located in the parent group.
> Did you try to associate the label directly to the corresponding  
> input control? XForms 2.0 does not yet specify xforms:label/@for and  
> this is not implemented in latest build of XSLTForms.

The point is that the 'grandfather' label allocation styles right and  
the more correct direct (or parent) label allocation styles wrong. I  
guess it is a CSS issue rather than an XSLTForms one. Why does the  
<div class="xforms-group-content"> get only 50% width and not the full  
space available?

I found a solution by assigning different classes to the div's that  
are parent of the <div class="xforms-group-content"> and define the  
width of the XSLTForms generated divs through those.

Examples of well-styled complex forms would probably help many  
implementers. Does a place exist to upload and view such solutions?

Kind regards,

Fred van Blommestein