Tabview - Style for specific Tab

UI Components for JSF
arex
Posts: 8
Joined: 03 Mar 2010, 22:07

26 May 2010, 22:07

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

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

30 May 2010, 13:08

Hi,

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

arex
Posts: 8
Joined: 03 Mar 2010, 22:07

02 Jun 2010, 20:31

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

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

04 Jun 2010, 10:59

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

arex
Posts: 8
Joined: 03 Mar 2010, 22:07

07 Jun 2010, 17:19

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

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

08 Jun 2010, 15:04

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

shuta
Posts: 15
Joined: 25 Dec 2010, 19:20

13 Jan 2011, 15:36

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!

hoveran
Posts: 4
Joined: 08 Jan 2011, 15:30

19 Jan 2011, 04:34

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

User avatar
bumble.bee
Posts: 723
Joined: 29 Sep 2010, 21:39
Location: United States

19 Jan 2011, 16:15

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

bitec
Posts: 44
Joined: 20 Jan 2011, 21:34
Location: Russia

28 Feb 2011, 10:41

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...
JSF: Mojarra 2.1 | PrimeFaces 2.2.1 | Glassfish 3.1

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 16 guests