Board index JavaServer Faces General Tabview - Style for specific Tab

Tabview - Style for specific Tab

Components, Ajax Framework, Utilities and More.


Posts: 8
I'm trying to get just one Tab in a tab view to have a background color of red all the time, and for the others to act normally. I haven't been able to find a CSS hook to specify the tab I want, it seems like styling is an all or nothing proposition for the tab view. Is there a way to do this?

Thanks,

Alex
PrimeFaces 2.0.0
JSF 2.0.0
Tomcat 6.0.20


Posts: 15103
Location: Cybertron

Hi,

Are you trying to style the tab's header or content?
PrimeFaces Lead


Posts: 8
I'm trying to style the header only
PrimeFaces 2.0.0
JSF 2.0.0
Tomcat 6.0.20


Posts: 15103
Location: Cybertron

If it is tab header based, you can do it easily with id based css styling;

<p:tab id="tab1">
</p:tab>

<p:tab id="tab2">
</p:tab>


#tab1 {
   background-color:yellow;
}

#tab2 {
   background-color:blue;
}
PrimeFaces Lead


Posts: 8
The ID tab doesn't persist into the rendered HTML. This:

<p:tab title="Pending Expiry" id="tab1">

becomes this:

<li><a href="#templateForm:tab1"><em>Pending Expiry</em></a></li>
PrimeFaces 2.0.0
JSF 2.0.0
Tomcat 6.0.20


Posts: 15103
Location: Cybertron

I see, yes you are right, please open an enhancement type issue ticket for this. It is very easy to fix.
PrimeFaces Lead


Posts: 15
I could also use a tab header styling feature (styleClass / style attributes would suffice). I see there is already an open issue for this: http://code.google.com/p/primefaces/iss ... ail?id=892

Hope this gets implemented. Thanks :D!


Posts: 4
I also need to specify the Tab title style because when I put Chinese for the tab title, it doesn't look good.

Is it fixed using id or any other work around for it?

Thanks,
Hoveran


Posts: 723
Location: United States
A p:tab component results in two parent elements: a li and a div. The li is used for the title and the div is used for the content. The id that you specify in a p:tab actually goes to the div, not the li.

The fix for this might be to allow users of p:tab to specify a titleId and contentId separately.

In the meantime you can get to the title with an attribute selector. The li will have an anchor tag with the href including the id of the content div. If you set the id then you know it. Otherwise it is automatically generated. Set it (for example to be myTab1), then you can use a selector like this:

a[href="#myTab1"] {
    color: red !important;
}


Posts: 44
Location: Russia
Hi.

Currently there is NO way to edit the style for the tab. The content, which is rendered:
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" >
        <a href="#polisForm:calculatorTab" style="background-color:red;">
            <em id="aeaoofnhgocdbnbeljkmbjdmhbcokfdb-mousedown">Calculator</em>
        </a>
     </li>
....


The id for tab is calculatorTab, so I in styles I can access <a> tag, but not the <li> one (as CSS does not allow to access parent element). Cagatay, you said, that the id attribute is easy to fix, could you do this for next milestones? I will have to add the javascript to find the necessary li attribute and set the style for it, but this is not correct at all...
JSF: Mojarra 2.1 | PrimeFaces 2.2.1 | Glassfish 3.1

Next

Return to General