controlling boolean input labels with CSS - a hack

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

controlling boolean input labels with CSS - a hack

Don Smith-9
For anyone who wants to move the label for a boolean
input to the right of the checkbox (instead of the
left which is the default), here's one way to do it:

1. Remove the normal label content and put it after
the close </xforms:input> tag (yet still inside
whatever HTML element you have containing the input).
NOTE: leave the input label empty; don't make it a
singleton tag.

<xhtml:p>
 <xforms:input ref="section1/acknowledement"
class="boolean">
   <xforms:label></xforms:label>
 </xforms:input>I acknowledge that I read the terms of
the agreement.
</xhtml:p>

2. Style the input element with a "float: left":

   .xforms-input.boolean {float: left;}

That should move the label to the right of the input
checkbox. I've not be able to get any further control
of the label styling (such as moving it closer to the
checkbox.) I've only testing this in IE 7 and FireFox
2.0. YMMV.

Don


      ____________________________________________________________________________________
Be a better friend, newshound, and
know-it-all with Yahoo! Mobile.  Try it now.  http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
OW2 mailing lists service home page: http://www.ow2.org/wws