Orbeon Forms community mailing list

Tabview xbl component doesn't add the class attribute to the output

Classic

List

Threaded

5 messages Options

inanda.menezes

Tabview xbl component doesn't add the class attribute to the output

Hi all,

When we add class to the fr:tab component, it doesn't add to the html output.

Xforms code:
<fr:tabview>
<fr:tab id="int-1-exttab1" class="preselection">
<fr:label>Label tab</fr:label>
Content
</fr:tab>
</fr:tabview>

Output:
<div class="xbl-component xbl-fr-tabview" id="xf-2">

<div class="yui-navset yui-navset-top">
<ul class="yui-nav">
<li id="xf-2$nav-1" <b>class="selected" style="" title="active"><em>Label of first tab</em></li></ul>
<div class="yui-content">
<div class="">

Content of first tab.-
<button type="button" style="display: none;" class="xforms-control xforms-trigger" id="xf-2$fr-tabview-select-1"></button>
<button type="button" style="display: none;" class="xforms-control xforms-trigger" id="xf-2$fr-tabview-deselect-1"></button>

</div>
</div>
</div>

</div>

My fr:tab element has a class="preselection" and the idea would be to have the li element like:
<li id="xf-2$nav-1" <b>class="selected preselection" style="" title="active">

Why the tabview xbl component does not add the class attribute to the output?

inanda.menezes

Re: Tabview xbl component doesn't add the class attribute to the output

Hi,

The problem is solved. I've changed the tabview xbl component to add the class to the output:

Before:
<xsl:for-each select="fr:tab">
<xsl:variable name="label" as="element(fr:label)" select="fr:label[1]"/>
<xhtml:li style="{{if ($fr-tab-relevance-{position()}) then '' else 'display: none'}}"
class="{{if (active-tab-position = '{position()}') then 'selected' else ''}}{{
if (exf:readonly($fr-tab-binding-{position()})) then ' disabled' else ''}} id="nav-{position()}">

After:
<xsl:for-each select="fr:tab">
<xsl:variable name="label" as="element(fr:label)" select="fr:label[1]"/>
<xsl:variable name="tabClass" select="@class"/>
<xhtml:li style="{{if ($fr-tab-relevance-{position()}) then '' else 'display: none'}}"
class="{{if (active-tab-position = '{position()}') then 'selected' else ''}}{{
if (exf:readonly($fr-tab-binding-{position()})) then ' disabled' else ''}}{{' {$tabClass}'}}" id="nav-{position()}">

Alessandro Vernet

Re: Re: Tabview xbl component doesn't add the class attribute to the output

Administrator

Hi Inanda,

Thank you; this is a good idea. I put some code similar to what you
had, and also copied the class on the <div> with the content of the
tab, in addition to the tab label. This is now checked in, and will be
included in the next nightly build. For reference:

https://github.com/orbeon/orbeon-forms/commit/4b3d9e526f652fc4e0352587b31427d7c8a93f0b
http://forge.ow2.org/tracker/index.php?func=detail&aid=316211&group_id=168&atid=350207

Alex

On Thu, Sep 29, 2011 at 6:35 AM, inanda.menezes <[hidden email]> wrote:

> Hi,
>
> The problem is solved. I've changed the tabview xbl component to add the
> class to the output:
>
> Before:
> <xsl:for-each select="fr:tab">
> <xsl:variable name="label" as="element(fr:label)" select="fr:label[1]"/>
> <xhtml:li style="{{if ($fr-tab-relevance-{position()}) then '' else
> 'display: none'}}"
> class="{{if (active-tab-position = '{position()}') then
> 'selected' else ''}}{{
> if (exf:readonly($fr-tab-binding-{position()})) then '
> disabled' else ''}} id="nav-{position()}">
>
> After:
> <xsl:for-each select="fr:tab">
> <xsl:variable name="label" as="element(fr:label)" select="fr:label[1]"/>
> <xsl:variable name="tabClass" select="@class"/>
> <xhtml:li style="{{if ($fr-tab-relevance-{position()}) then '' else
> 'display: none'}}"
> class="{{if (active-tab-position = '{position()}') then
> 'selected' else ''}}{{
> if (exf:readonly($fr-tab-binding-{position()})) then '
> disabled' else ''}}{{' {$tabClass}'}}" id="nav-{position()}">
>
> --
> View this message in context: http://orbeon-forms-ops-users.24843.n4.nabble.com/Tabview-xbl-component-doesn-t-add-the-class-attribute-to-the-output-tp3855682p3855759.html
> Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.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
>
>

--
Orbeon Forms - Web forms, open-source, for the Enterprise -
http://www.orbeon.com/
My Twitter: http://twitter.com/avernet

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

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

bsteuhl

Re: Re: Tabview xbl component doesn't add the class attribute to the output

In Orbeon 3.9 CE I see the class attribute in the page source but it is empty even if I specify a class on fr:tab? class=""

How would we apply style for example different background colors for tabs?

Regards

bsteuhl

Re: Re: Tabview xbl component doesn't add the class attribute to the output

I had to get the correct nightly build and then I was able to color the tabs differently based on class and using following css:

li.tabGroup1 a em{font-weight:bold; background-color:blue; color:white}
li.tabGroup2 a em{font-weight:bold; background-color:green; color:white}
etc ...

Regards,
Brian