[Xsltforms-support] Styling problem

Wed, 17 Apr 2013 12:42:14 -0700 

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

<<attachment: style.JPG>>
------------------------------------------------------------------------------
Precog is a next-generation analytics platform capable of advanced
analytics on semi-structured data. The platform includes APIs for building
apps and a phenomenal toolset for data science. Developers can use
our toolset for easy data analysis & visualization. Get a free account!
http://www2.precog.com/precogplatform/slashdotnewsletter
_______________________________________________
Xsltforms-support mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/xsltforms-support






















					Reply via email to