4.0 m3 - xforms select with checkboxes label

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

4.0 m3 - xforms select with checkboxes label

idwright
Hi,
The generated HTML tagging for xforms:select when used with check boxes has changed so that the label is within the same span as the items.
While this seems like a good thing I think the class attributes are possibly in the wrong place - I'm getting some horrible looking output as it stands.

Regards,
Ian

Example
<div class="box">
<xforms:select ref="myList/@selected" appearance="full"
                            class="scrollableCheckboxes">
                            <xforms:label class="scrollableCheckboxesLabel"> Items to select
                            </xforms:label>
                            <xforms:item>
                                <xforms:label>Any</xforms:label>
                                <xforms:value>any</xforms:value>
                            </xforms:item>

Old
<div class="box">
	<label class="scrollableCheckboxesLabel xforms-label" id="xf-1470$$l">  Items to select</label>

	<span id="xf-1470" class="scrollableCheckboxes xforms-control xforms-select xforms-incremental xforms-select-appearance-full">
		<span class="xforms-selected">
			<input id="xf-1470$$e0" type="checkbox" name="xf-1470" value="WTGKPqfTjyg=" checked><label for="xf-1470$$e0">Any</label></span>
New

<div class="box">

	<span id="xf-1470" class="scrollableCheckboxes xforms-control xforms-select xforms-incremental xforms-select-appearance-full">
		<label class="scrollableCheckboxesLabel xforms-label" id="xf-1470$$l">  Items to select</label>

		<span>
		<span class="xforms-selected">
			<input id="xf-1470$$e0" type="checkbox" name="xf-1470" value="WTGKPqfTjyg=" checked><label for="xf-1470$$e0">Any</label></span>
Suggested

<div class="box">

	<span id="xf-1470">
		<label class="scrollableCheckboxesLabel xforms-label" id="xf-1470$$l">  Items to select</label>

		<span class="scrollableCheckboxes xforms-control xforms-select xforms-incremental xforms-select-appearance-full">
		<span class="xforms-selected">
			<input id="xf-1470$$e0" type="checkbox" name="xf-1470" value="WTGKPqfTjyg=" checked><label for="xf-1470$$e0">Any</label></span>


CSS
.scrollableCheckboxesLabel {
    width: 10em;
    padding: 2px;
    margin: 4px;
    float: left;
}
.scrollableCheckboxes {
    max-height: 100px;
    width: 240px;
    padding: 2px;
    margin: 4px;
    overflow: auto;
    display: block;

}


--
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
Reply | Threaded
Open this post in threaded view
|

Re: 4.0 m3 - xforms select with checkboxes label

Alessandro  Vernet
Administrator
Hi Ian,

In span mode, which used to be an option in 3.9 and will be the only available in 4.0, all the classes that tell you something about the control (readonly, valid, type…) go on an element that also surrounds the label, help, hint, and alert. This allows you to style those based on the state of the control, for instance adding a star (*) next to the label if the control is required, or not to show an alert if the control has never been visited by users.

So what you have there is done on purpose:

* The scrollableCheckboxes class you have on the <xforms:select> goes on an outer element.
* The scrollableCheckboxesLabel you have on the <xforms:label> goes on an HTML <label> inside that outer element.

Note that this is also the same nesting you have in your XForms. I understand that a downside of this change is that you might (in this case, will) have to change your CSS, but once this is done, I hope you'll find it more flexible. This being said, just let us know if there is some styling that you could do in nospan mode, and that you're find you can't do now in span mode, even if you're changing the CSS.

Alex
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet