Orbeon Forms community mailing list

Orbeon and CSS contextual selectors

Classic

List

Threaded

4 messages Options

matthew.d.rawlings

Orbeon and CSS contextual selectors

I am having problems getting CSS contextual selectors to work with my Orbeon XForms. I expected the below XHTML to display the labels in bold, but does not do so. The non-XForms XHTML equivalent works as expected. The form runs without warning in the Orbeon Sandbox.

I am using Firefox 3.0.3 and IE 6.0.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xxforms="http://orbeon.org/oxf/xml/xforms" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<head>
<title>Demo of CSS problems</title>
<meta name="author" content="Matthew Rawlings" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="content-type" content="text/html; charset=iso-885901" />
<xf:model>
<xf:instance id="vehicle1">
<car xmlns="">
<wheels>4</wheels>
<colour>British Racing Green</colour>
</car>
</xf:instance>
</xf:model>
<style type="text/css">.xforms-output .xforms-label { font-weight: bold }

</style>
</head>
<body>

<xf:output class="vehicle-facet" ref="instance('vehicle1')/wheels">
<xf:label>Wheels</xf:label>
</xf:output>


<xf:output class="vehicle-facet" ref="instance('vehicle1')/colour">
<xf:label>Colour</xf:label>
</xf:output>

</body>
</html>

How do I get the xforms:labels that are descendants of xforms:output to show in bold?

This communication is for informational purposes only. It is not intended as an offer or solicitation for the purchase or sale of any financial instrument or as an official confirmation of any transaction. All market prices, data and other information are not warranted as to completeness or accuracy and are subject to change without notice. Any comments or statements made herein do not necessarily reflect those of JPMorgan Chase & Co., its subsidiaries and affiliates. This transmission may contain information that is privileged, confidential, legally privileged, and/or exempt from disclosure under applicable law. If you are not the intended recipient, you are hereby notified that any disclosure, copying, distribution, or use of the information contained herein (including any reliance thereon) is STRICTLY PROHIBITED. Although this transmission and any attachments are believed to be free of any virus or other defect that might affect any computer system into which it is received and opened, it is the responsibility of the recipient to ensure that it is virus free and no responsibility is accepted by JPMorgan Chase & Co., its subsidiaries and affiliates, as applicable, for any loss or damage arising in any way from its use. If you received this transmission in error, please immediately contact the sender and destroy the material in its entirety, whether in electronic or hard copy format. Thank you. Please refer to http://www.jpmorgan.com/pages/disclosures for disclosures relating to UK legal entities.

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

fl.schmitt(ops-users)

Re: Orbeon and CSS contextual selectors

Matthew,

> I am having problems getting CSS contextual selectors to work with my
> Orbeon XForms. I expected the below XHTML to display the labels in bold,
> but does not do so. The non-XForms XHTML equivalent works as expected.
> The form runs without warning in the Orbeon Sandbox.

your css style won't apply, because the resulting html looks as follows:


<label class="xforms-label" for="xforms-element-6">Colour</label>
British Racing Green



The label is a sibling to the span element that's assigned to the xforms-output
class. Your syntax assumes that it's a descendant.

Especially, it's a _preceding_ sibling, so you can't use the CSS sibling
selector '+', too (for example, "label + span" to select span's that are
following siblings to a label element).

As a workaround, you could use a span element assigned to a user-defined class
as a "marker" for xforms-output elements:



<xf:output class="vehicle-facet" ref="instance('vehicle1')/wheels">
<xf:label>Wheels</xf:label>
</xf:output>




<xf:output class="vehicle-facet" ref="instance('vehicle1')/colour">
<xf:label>Colour</xf:label>
</xf:output>



Now, you can address the labels with

<style type="text/css">.my-xforms-output label { font-weight: bold }</style>

HTH
florian

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

Erik Bruchez

Re: Re: Orbeon and CSS contextual selectors

Administrator

Speaking of this issue, we have already implemented quite a bit of the
"new" HTML layout for XForms controls. In that layout, each control
will have an enclosing , so you will be able to write:

.xforms-output .xforms-label { font-weight: bold }

The server-side code and part of the client-side code for this is
already there, but there are a few details to complete.

This should also allow controlling alerts much better, e.g.:

.xforms-invalid .xforms-alert, .xforms-required-empty .xforms-alert
{ display: inline }

-Erik

On Oct 28, 2008, at 12:55 PM, Florian Schmitt wrote:

> Matthew,
>
>> I am having problems getting CSS contextual selectors to work with my
>> Orbeon XForms. I expected the below XHTML to display the labels in
>> bold,
>> but does not do so. The non-XForms XHTML equivalent works as
>> expected.
>> The form runs without warning in the Orbeon Sandbox.
>
> your css style won't apply, because the resulting html looks as
> follows:
>
> 
> <label class="xforms-label" for="xforms-element-6">Colour</label>
> xforms-output">British Racing Green
> 
> 
>
> The label is a sibling to the span element that's assigned to the
> xforms-output
> class. Your syntax assumes that it's a descendant.
>
> Especially, it's a _preceding_ sibling, so you can't use the CSS
> sibling
> selector '+', too (for example, "label + span" to select span's that
> are
> following siblings to a label element).
>
> As a workaround, you could use a span element assigned to a user-
> defined class
> as a "marker" for xforms-output elements:
>
> 
> 
> <xf:output class="vehicle-facet" ref="instance('vehicle1')/
> wheels">
> <xf:label>Wheels</xf:label>
> </xf:output>
> 
> 
> 
> 
> <xf:output class="vehicle-facet" ref="instance('vehicle1')/
> colour">
> <xf:label>Colour</xf:label>
> </xf:output>
> 
> 
>
> Now, you can address the labels with
>
> <style type="text/css">.my-xforms-output label { font-weight:
> bold }</style>
>
>
> HTH
> florian

--
Orbeon Forms - Web Forms for the Enterprise Done the Right Way
http://www.orbeon.com/

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

matthew.d.rawlings

Re: Re: Re: Orbeon and CSS contextual selectors

Erik - That is cool. I look forward to the "new" HTML layout.

Florian - Thanks for explaining. In the end I decided I might as well add a class to my labels as add another span element.

Matthew