Tabview - Style for specific Tab

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

[optimus.prime]

Hi,

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

I'm trying to style the header only

[optimus.prime]

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

Code: Select all

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

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


Code: Select all

#tab1 {
   background-color:yellow;
}

#tab2 {
   background-color:blue;
}


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>

[optimus.prime]

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

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 !

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

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:

Code: Select all

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


Hi.

Currently there is NO way to edit the style for the tab. The content, which is rendered:

Code: Select all

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