Orbeon Forms community mailing list

wrap controls with TD instead of span?

Classic

List

Threaded

10 messages Options

Adrian Baker-2

wrap controls with TD instead of span?

Could anyone forsee any problems if theme.xsl was modified to produce
<td> elements that acted as the wrapping element, instead of 
elements?

Due to CSS limitations in both IE & Firefox I've been railroaded into
using tables to lay out controls. So instead of:

<label class="xforms-label" for="my-control-id"/>

(html representing xforms control)


it would produce

<td>
<label class="xforms-label" for="my-control-id"/>
</td>
<td id="my-control-id" class="xforms-control ...">
(html representing xforms control)
</td>

I've done a little bit of testing, and things seem to work ok - I'm just
worried I'm breaking an underlying assumption of OPS by making this sort
of change. Looking at xforms.js makes me a bit uneasy because of the
number of direct references to span elements, eg.

} else if (control.tagName == "SPAN" || control.tagName ==
"DIV" || control.tagName == "LABEL") {
// Don't add listeners on spans

Although I assume this is just an optimisation which I could extend to
include TD.

One headache is that the <label> has to get wrapped in a cell, which
presumably means it won't get hidden by Orbeon if the control becomes
irrelevant.. But if I don't give it a fixed size it should shrink to
nothing when the contained label is removed/hidden.

Adrian

--
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
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Erik Bruchez

Re: wrap controls with TD instead of span?

Administrator

Adrian,

Could you use the CSS "display: table-cell" on the to achieve
this? Or does that cause problems in Firefox or IE?

Or, you could encapsulate the <label> and within the <td>,
instead of just renaming them. I think the client-side code should
find the label even if within a <td> let us know how this goes.

-Erik

Adrian Baker wrote:
> Could anyone forsee any problems if theme.xsl was modified to produce
> <td> elements that acted as the wrapping element, instead of 
> elements?
>
> Due to CSS limitations in both IE & Firefox I've been railroaded into
> using tables to lay out controls. So instead of:
>
> <label class="xforms-label" for="my-control-id"/>
> 
> (html representing xforms control)
> 
>
> it would produce
>
> <td>
> <label class="xforms-label" for="my-control-id"/>
> </td>
> <td id="my-control-id" class="xforms-control ...">
> (html representing xforms control)
> </td>
>
> I've done a little bit of testing, and things seem to work ok - I'm just
> worried I'm breaking an underlying assumption of OPS by making this sort
> of change. Looking at xforms.js makes me a bit uneasy because of the
> number of direct references to span elements, eg.
>
> } else if (control.tagName == "SPAN" || control.tagName ==
> "DIV" || control.tagName == "LABEL") {
> // Don't add listeners on spans
>
> Although I assume this is just an optimisation which I could extend to
> include TD.
>
> One headache is that the <label> has to get wrapped in a cell, which
> presumably means it won't get hidden by Orbeon if the control becomes
> irrelevant.. But if I don't give it a fixed size it should shrink to
> nothing when the contained label is removed/hidden.
>
> Adrian

--
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
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Adrian Baker-2

Re: wrap controls with TD instead of span?

It's not so much that I want table cell-like behavior, rather I need a
column based layout with labels in a left column, controls in a right
column (similar to the OPS controls example), plus the left label column
must have a background color (which appears as a single vertical column
of color). Right hand column must be variable width, and wrap
appropriately (ie only within the right hand column). From the
experiments I've done it's mostly possible except that
display:inline-table isn't supported on Firefox, which means any
wrapping ruins the left colour block. From there, things degrade into
various hacks to try and get it working, whereas tables just work :)

Regarding wrapping the with a <td>, I was hoping to avoid this
because it starts to complicate the CSS, because some styles end up
applying to the cell, some to the span. Which also at some point means I
have to introduce classes onto the cell based on it's contents (ugh).
But if you think renaming the tag is going to cause issues I guess I'll
have to live with it. And, thinking more about it, if the <label> it's
wrapped it's probably best to wrap the for consistency.

Adrian

Erik Bruchez wrote:

> Adrian,
>
> Could you use the CSS "display: table-cell" on the to achieve
> this? Or does that cause problems in Firefox or IE?
>
> Or, you could encapsulate the <label> and within the <td>,
> instead of just renaming them. I think the client-side code should
> find the label even if within a <td> let us know how this goes.
>
> -Erik
>
> Adrian Baker wrote:
> > Could anyone forsee any problems if theme.xsl was modified to produce
> > <td> elements that acted as the wrapping element, instead of 
> > elements?
> >
> > Due to CSS limitations in both IE & Firefox I've been railroaded into
> > using tables to lay out controls. So instead of:
> >
> > <label class="xforms-label" for="my-control-id"/>
> > 
> > (html representing xforms control)
> > 
> >
> > it would produce
> >
> > <td>
> > <label class="xforms-label" for="my-control-id"/>
> > </td>
> > <td id="my-control-id" class="xforms-control ...">
> > (html representing xforms control)
> > </td>
> >
> > I've done a little bit of testing, and things seem to work ok - I'm
> just
> > worried I'm breaking an underlying assumption of OPS by making this
> sort
> > of change. Looking at xforms.js makes me a bit uneasy because of the
> > number of direct references to span elements, eg.
> >
> > } else if (control.tagName == "SPAN" || control.tagName ==
> > "DIV" || control.tagName == "LABEL") {
> > // Don't add listeners on spans
> >
> > Although I assume this is just an optimisation which I could extend to
> > include TD.
> >
> > One headache is that the <label> has to get wrapped in a cell, which
> > presumably means it won't get hidden by Orbeon if the control becomes
> > irrelevant.. But if I don't give it a fixed size it should shrink to
> > nothing when the contained label is removed/hidden.
> >
> > Adrian

--
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
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Erik Bruchez

Re: wrap controls with TD instead of span?

Administrator

Adrian Baker wrote:
> Regarding wrapping the with a <td>, I was hoping to avoid this
> because it starts to complicate the CSS, because some styles end up
> applying to the cell, some to the span. Which also at some point means I
> have to introduce classes onto the cell based on it's contents (ugh).
> But if you think renaming the tag is going to cause issues I guess I'll
> have to live with it. And, thinking more about it, if the <label> it's
> wrapped it's probably best to wrap the for consistency.

Well I couldn't swear that this will cause issues or not. The best thing
to do is give it a try and report issues if any. Of course please keep
us posted on the solution you have found if any.

-Erik

--
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
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Adrian Baker-2

Re: wrap controls with TD instead of span?

In reply to this post by Adrian Baker-2

Adrian Baker wrote:

> It's not so much that I want table cell-like behavior, rather I need a
> column based layout with labels in a left column, controls in a right
> column (similar to the OPS controls example), plus the left label
> column must have a background color (which appears as a single
> vertical column of color). Right hand column must be variable width,
> and wrap appropriately (ie only within the right hand column). From
> the experiments I've done it's mostly possible except that
> display:inline-table isn't supported on Firefox, which means any
> wrapping ruins the left colour block. From there, things degrade into
> various hacks to try and get it working, whereas tables just work :)

Actually it was display:inline-block that was the problem (not supported

in Mozilla). What I was trying to do was:

[label] |The quick brown fox
|jumps over the lazy
|dog.

Where the right hand side is just a span containing text (an
xforms:output). I managed it with display:inline-block in IE, but
couldn't achieve it in Mozilla. Hopefully this is where someone tells me
it's easily done with x,y,z instead :)

Adrian

--
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
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Ryan Puddephatt

RE: wrap controls with TD instead of span?

Have you tried -moz-inline-block?

Ryan Puddephatt
Software Engineer
TFX Group - IT UK
1 Michaelson Square
Livingston
West Lothian
Scotand
EH54 7DP

* [hidden email]
( 01506 407 110
7 01506 407 108

>-----Original Message-----
>From: Adrian Baker [mailto:[hidden email]]
>Sent: 13 February 2006 21:15
>To: [hidden email]
>Subject: Re: [ops-users] wrap controls with TD instead of span?
>
>Adrian Baker wrote:
>> It's not so much that I want table cell-like behavior, rather I need a
>> column based layout with labels in a left column, controls in a right
>> column (similar to the OPS controls example), plus the left label
>> column must have a background color (which appears as a single
>> vertical column of color). Right hand column must be variable width,
>> and wrap appropriately (ie only within the right hand column). From
>> the experiments I've done it's mostly possible except that
>> display:inline-table isn't supported on Firefox, which means any
>> wrapping ruins the left colour block. From there, things degrade into
>> various hacks to try and get it working, whereas tables just work :)
>Actually it was display:inline-block that was the problem (not supported
>in Mozilla). What I was trying to do was:
>
>[label] |The quick brown fox
> |jumps over the lazy
> |dog.
>
>Where the right hand side is just a span containing text (an
>xforms:output). I managed it with display:inline-block in IE, but
>couldn't achieve it in Mozilla. Hopefully this is where someone tells me
>it's easily done with x,y,z instead :)
>
>Adrian
>

Adrian Baker-2

Re: wrap controls with TD instead of span?

Yes - it won't keep the label and the output on the same line eg, I end up with

[label]
The quick brown
fox jumps over
the lazy dog

-moz-inline-box has the same effect, except it doesn't even wrap eg
[label]
The quick brown fox jumps over...

Ryan Puddephatt wrote:

Have you tried -moz-inline-block?

Ryan Puddephatt
Software Engineer
TFX Group - IT UK
1 Michaelson Square
Livingston
West Lothian
Scotand
EH54 7DP
 
* [hidden email]
( 01506 407 110
7  01506 407 108

-----Original Message-----
From: Adrian Baker [[hidden email]]
Sent: 13 February 2006 21:15
To: [hidden email]
Subject: Re: [ops-users] wrap controls with TD instead of span?

Adrian Baker wrote:

It's not so much that I want table cell-like behavior, rather I need a
column based layout with labels in a left column, controls in a right
column (similar to the OPS controls example), plus the left label
column must have a background color (which appears as a single
vertical column of color). Right hand column must be variable width,
and wrap appropriately (ie only within the right hand column). From
the experiments I've done it's mostly possible except that
display:inline-table isn't supported on Firefox, which means any
wrapping ruins the left colour block. From there, things degrade into
various hacks to try and get it working, whereas tables just work :)

Actually it was display:inline-block that was the problem (not supported
in Mozilla). What I was trying to do was:

[label]   |The quick brown fox
         |jumps over the lazy
         |dog.

Where the right hand side is just a span containing text (an
xforms:output). I managed it with display:inline-block in IE, but
couldn't achieve it in Mozilla. Hopefully this is where someone tells me
it's easily done with x,y,z instead :)

Adrian

Adrian Baker-2

Re: wrap controls with TD instead of span?

I actually did get this to sort of work: for -moz-inline-box/-moz-inline-block to work it seems they have to be assigned widths.

But in the end I've decided it was too problematic, and have reverted to wrapping both the control and the label in a td, eg:

<tr>
 <td>
 <label class="label xforms-label" for="input-N1009E16">Diagnosis</label>
 </td>
 <td>
 
 
 <input type="text" name="input-N1009E16" value="Malignant neoplasm of thymus" class="xforms-input-input xforms-type-string">
 
 
 <label class="xforms-alert xforms-alert-active" for="input-N1009E16">Please enter a primary diagnosis</label>
 <label class="xforms-hint" for="input-N1009E16">Hint</label>
 </td>
</tr>

Which works well enough. To reduce the amount of markup being added by theme.xsl what I do is pass OPS:

<xhtml:tr>
 <xhtml:td>
 (empty label placeholder)
 </xhtml:td>
 <xhtml:td>
 <xforms:input ...>
 ....
 <xforms:label>
 </xforms:input>
 </xhtml:td>
</xhtml:tr>

Then theme.xsl shifts the generated html <label> out of the second cell back up into the first. Hacky, but hey this is a web app :)

I'd love to see the justification for the XForms spec not allowing labels to be placed standalone with html 4.0-like markup: <xforms:label for="{inputid}">, which would make the hacky engine-specific customization unnecessary.

Adrian

Adrian Baker wrote:

Have you tried -moz-inline-block?

Ryan Puddephatt
Software Engineer
TFX Group - IT UK
1 Michaelson Square
Livingston
West Lothian
Scotand
EH54 7DP
 
* [hidden email]
( 01506 407 110
7  01506 407 108

-----Original Message-----
From: Adrian Baker [[hidden email]]
Sent: 13 February 2006 21:15
To: [hidden email]
Subject: Re: [ops-users] wrap controls with TD instead of span?

Adrian Baker wrote:

It's not so much that I want table cell-like behavior, rather I need a
column based layout with labels in a left column, controls in a right
column (similar to the OPS controls example), plus the left label
column must have a background color (which appears as a single
vertical column of color). Right hand column must be variable width,
and wrap appropriately (ie only within the right hand column). From
the experiments I've done it's mostly possible except that
display:inline-table isn't supported on Firefox, which means any
wrapping ruins the left colour block. From there, things degrade into
various hacks to try and get it working, whereas tables just work :)

Actually it was display:inline-block that was the problem (not supported
in Mozilla). What I was trying to do was:

[label]   |The quick brown fox
         |jumps over the lazy
         |dog.

Where the right hand side is just a span containing text (an
xforms:output). I managed it with display:inline-block in IE, but
couldn't achieve it in Mozilla. Hopefully this is where someone tells me
it's easily done with x,y,z instead :)

Adrian

Alessandro Vernet

Re: wrap controls with TD instead of span?

Administrator

In reply to this post by Adrian Baker-2

On 2/12/06, Adrian Baker <[hidden email]> wrote:
> I've done a little bit of testing, and things seem to work ok - I'm just
> worried I'm breaking an underlying assumption of OPS by making this sort
> of change.

If I remember correctly, some of the JavaScript code assumes that labels for the hint and error are siblings of the form element. So if you move those into a separate td, some of the code will break. However I feel you should be fine if you just move the label in a separate td. Of course, at the end of the day only testing will tell :).

You can do this move in your theme in XSL, so the part of the XForms engine which is written in Java can still generate HTML that is as simple as possible.

Now it would be even better if you can get this to work without having to modify the theme, just by using CSS. If you get stuck in the process, feel free to ask a question here. Dealing with CSS can be frustrating, and I for one have too often the tendency to resort to the "let's just add an HTML table" solution.

Alex
--
Blog (XML, Web apps, Open Source):
http://www.orbeon.com/blog/

--
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
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

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

Erik Bruchez

Re: wrap controls with TD instead of span?

Administrator

In reply to this post by Adrian Baker-2

Adrian Baker wrote:

> I'd love to see the justification for the XForms spec not allowing
> labels to be placed standalone with html 4.0-like markup: <xforms:label
> for="{inputid}">, which would make the hacky engine-specific
> customization unnecessary.

Yes, this is one with which we are not 100% happy either.

-Erik

--
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
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws