They are buttons in JSP as well. You can fix this by making use of the many CSS related attributes of the panel tab component.
>-----Original Message----- >From: Jeremy Sager [mailto:[EMAIL PROTECTED] >Sent: Friday, January 6, 2006 11:20 AM >To: ''MyFaces Discussion'' >Subject: RE: Why tabs look like buttons? > >Hi guys - > >I know I'm resurrecting a dead thread here, but I have run into the same >problem under different circumstances. > >I'm trying out facelets based on the recommendations of people on this list, >and everything is going great so far, I'll probably never go back to JSPs. > >However, when I create a panelTabbedPane, all of my panel tabs look like >buttons instead of panel tabs. I don't have any save logic, and I've tried >the css workaround, but all that it does is make the BODY area of my panel >tabs the color specified, and it leaves the "tabs" as buttons with no border >around them. > >I've got to present facelets to my boss in a few hours, so if anyone knows >what's up with this, I'd appreciate the help ASAP :) > >FYI I'm using MyFaces 1.1.0 > >Jeremy Sager >Data Communications Product Manager >Chesapeake System Solutions >410.356.6805 x120 >[EMAIL PROTECTED] >-----Original Message----- >From: Don Tam [mailto:[EMAIL PROTECTED] >Sent: Thursday, November 17, 2005 11:17 AM >To: MyFaces Discussion >Subject: Re: Why tabs look like buttons? > >Hi Bobby, > >Thanks for your response. I have that exact declaration in my css and >it's still white. I put the declaration just underneath another style >class that I know is working. Do you know what the problem is? > >Here is the head that is generated on the page: > ><head> > <meta HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8"> > <title>stuff</title> > <link rel="stylesheet" type="text/css" href="/dir/css/basic.css"> > ><script >src="/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuRe >nderer/11302665/JSCookMenu.js" type="text/javascript"><!-- > >//--></script> > ><script >src="/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuRe >nderer/11302665/MyFacesHack.js" type="text/javascript"><!-- > >//--></script> ><script type="text/javascript"><!-- >myThemeOfficeBase='/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.Ht >mlJSCookMenuRenderer/11302665/ThemeOffice/'; >//--></script> ><script >src="/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuRe >nderer/11302665/ThemeOffice/theme.js" type="text/javascript"><!-- > >//--></script> ><link rel="stylesheet" >href="/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuR >enderer/11302665/ThemeOffice/theme.css" type="text/css" /> ><link rel="stylesheet" >href="/dir/faces/myFacesExtensionResource/tabbedpane.HtmlTabbedPaneRenderer/ >11302665/defaultStyles.css" type="text/css" /> ><script >src="/dir/faces/myFacesExtensionResource/tabbedpane.HtmlTabbedPaneRenderer/1 >1302665/dynamicTabs.js" type="text/javascript"><!-- > >//--></script> ><style rel="stylesheet" type="text/css"><!-- >#_id2__id3 .myFaces_panelTabbedPane_activeHeaderCell input, >#_id2__id3 .myFaces_panelTabbedPane_pane, >#_id2__id3 .myFaces_panelTabbedPane_subHeaderCell{ >background-color:white; >} >--></style></head> > > >Here is my basic.css: > >.* { > font-family : verdana, Geneva, Arial, Helvetica, sans-serif; >} > >... > >.myFaces_panelTabbedPane_pane { > background-color: blue; >} > > >Thanks, > >Bobby Rosenberger wrote: > >> Hey Don, >> >> I did some experimenting and found that changing the selector you >> mention does have an effect on my tabpanes. For instance, I did the >> following: >> >> .myFaces_panelTabbedPane_pane { >> background-color: blue; >> } >> >> and found the background color of my tabbedpanes had indeed changed to >> blue. >> >> Bobby >> >> On 11/16/05, *Don Tam* <[EMAIL PROTECTED] >> <mailto:[EMAIL PROTECTED]>> wrote: >> >> Hi, >> >> I was just wondering, on a semi-related note, how would I set it up so >> that I can use a stylesheet class to set the background color of the >> panelTabbedPane instead of using the bgcolor attribute in the tag? >> >> I've tried declaring .myFaces_panelTabbedPane_pane in my >> stylesheet but >> it doesn't have any effect. >> >> Thanks, >> >> Bobby Rosenberger wrote: >> >> > Hey Rodney, >> > >> > I noticed that the tabs looked like buttons as well... but I found >> > that it was due to my changing my XP theme to use the "XP Windows >> > Theme". And, in my case, the tabs only looked like buttons when >> using IE. >> > >> > I'd be surprised if adding the 'save logic' were responsible for >> the >> > style change. Are you saying you can remove the logic and the tabs >> > revert back to their normal non-button look? I'd be interested >> to hear >> > the results of that experiment. >> > >> > In any case, there is currently no 'attribute' that allows you to >> > control the 'style' of the <input> tag on the tabs. You CAN, >> however, >> > override the style selector as follows: >> > >> > .myFaces_panelTabbedPane_activeHeaderCell input { >> > background-color: transparent !important; >> > etc... >> > } >> > >> > Note the use of "!important". >> > >> > Hope that helps. >> > >> > Bobby Rosenberger >> > >> > On 11/16/05, *Burke, Rodney* < [EMAIL PROTECTED] >> <mailto:[EMAIL PROTECTED]> >> > <mailto:[EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]>>> wrote: >> > >> > Hello, >> > >> > >> > >> > I had a working tab panel that looked normal. >> > >> > However, after adding logic to save the tab state, the tabs now >> > look like buttons. >> > >> > Does any one know what could be going wrong here? >> > >> > >> > >> > To manage tab state I'm using myfaces 20051114 nightly build >> and >> > the following logic: >> > >> > >> > >> > JSP FILE: >> > >> > ----------- >> > >> > <t:panelTabbedPane >> > selectedIndex="#{controlGEM.manualTabPaneIndex }" >> > serverSideTabSwitch="true"> >> > >> > <t:tabChangeListener >> type="mam.web.gem.ControlGEM"/> >> > >> > . >> > >> > </t:panelTabbedPane> >> > >> > >> > >> > mam.web.gem.ControlGEM Class: >> > >> > ----------------------------------------- >> > >> > import org.apache.myfaces.custom.tabbedpane.TabChangeListener; >> > >> > import org.apache.myfaces.custom.tabbedpane.TabChangeEvent ; >> > >> > import javax.faces.event.AbortProcessingException; >> > >> > >> > >> > public class ControlGEM implements TabChangeListener >> > >> > { >> > >> > . >> > >> > public void processTabChange(TabChangeEvent tabChangeEvent) >> > throws AbortProcessingException >> > >> > { >> > >> > setManualTabPaneIndex(new >> > Integer(tabChangeEvent.getNewTabIndex())); >> > >> > } >> > >> > } >> > >> > >> > >> > Again, the tab state logic appears to be working fine, >> except for >> > the fact that the tabs now look like buttons. >> > >> > >> > >> > Thanks for your help, >> > >> > Rodney >> > >> > >> > >> > >> >> -- >> Don Tam >> Manager, Software Development >> (416)493-6111x143 >> [EMAIL PROTECTED] <mailto:[EMAIL PROTECTED]> >> >> > >-- >Don Tam >Manager, Software Development >(416)493-6111x143 >[EMAIL PROTECTED] > > >
