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
Tabview - Style for specific Tab
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Hi,
Are you trying to style the tab's header or content?
Are you trying to style the tab's header or content?
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
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;
}
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
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 !
Hope this gets implemented. Thanks !
- bumble.bee
- Posts: 723
- Joined: 29 Sep 2010, 21:39
- 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:
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:
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...
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>
....
JSF: Mojarra 2.1 | PrimeFaces 2.2.1 | Glassfish 3.1
-
- Information
-
Who is online
Users browsing this forum: No registered users and 14 guests