You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by "Burke, Rodney" <bu...@ibiquity.com> on 2005/11/16 15:53:55 UTC

Why tabs look like buttons?

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

 


Re: Why tabs look like buttons?

Posted by Bobby Rosenberger <br...@gmail.com>.
Hey Don,

I'll take a stab at it. Your basic.css link is first in style
declarations... which, if I remember correctly, means that it is low man on
the totem-pole - any contradicting style declaration that follows it will
trump yours. I'd try using the !important attrib. like so:

.myFaces_panelTabbedPane_pane {
background-color: blue !important;
}

See if that helps.

Of course, if all else fails, using the attrib that is provided on the tag
would be the strongest of all because it applies the style 'in-line'... but
I think you mentioned not wanting to do that.

Good luck,
Bobby Rosenberger

On 11/17/05, Don Tam <dt...@consumercontact.com> wrote:
>
> 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.HtmlJSCookMenuRenderer/11302665/JSCookMenu.js"
> type="text/javascript"><!--
>
> //--></script>
>
> <script
> src="/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuRenderer/11302665/MyFacesHack.js"
> type="text/javascript"><!--
>
> //--></script>
> <script type="text/javascript"><!--
>
> myThemeOfficeBase='/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuRenderer/11302665/ThemeOffice/';
> //--></script>
> <script
> src="/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuRenderer/11302665/ThemeOffice/theme.js"
> type="text/javascript"><!--
>
> //--></script>
> <link rel="stylesheet"
> href="/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuRenderer/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/11302665/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* <dtam@consumercontact.com
> > <ma...@consumercontact.com>> 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* < burke@ibiquity.com
> > <ma...@ibiquity.com>
> > > <mailto:burke@ibiquity.com <ma...@ibiquity.com>>> 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
> > dtam@consumercontact.com <ma...@consumercontact.com>
> >
> >
>
> --
> Don Tam
> Manager, Software Development
> (416)493-6111x143
> dtam@consumercontact.com
>
>

RE: Why tabs look like buttons?

Posted by Jeremy Sager <js...@chessys.com>.
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
JSager@chessys.com
-----Original Message-----
From: Don Tam [mailto:dtam@consumercontact.com] 
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* <dtam@consumercontact.com 
> <ma...@consumercontact.com>> 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* < burke@ibiquity.com
>     <ma...@ibiquity.com>
>     > <mailto:burke@ibiquity.com <ma...@ibiquity.com>>> 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
>     dtam@consumercontact.com <ma...@consumercontact.com>
>
>

-- 
Don Tam
Manager, Software Development
(416)493-6111x143
dtam@consumercontact.com



Re: Why tabs look like buttons?

Posted by Don Tam <dt...@consumercontact.com>.
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.HtmlJSCookMenuRenderer/11302665/JSCookMenu.js" type="text/javascript"><!--

//--></script>

<script src="/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuRenderer/11302665/MyFacesHack.js" type="text/javascript"><!--

//--></script>
<script type="text/javascript"><!--
myThemeOfficeBase='/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuRenderer/11302665/ThemeOffice/';
//--></script>
<script src="/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuRenderer/11302665/ThemeOffice/theme.js" type="text/javascript"><!--

//--></script>
<link rel="stylesheet" href="/dir/faces/myFacesExtensionResource/navmenu.jscookmenu.HtmlJSCookMenuRenderer/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/11302665/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* <dtam@consumercontact.com 
> <ma...@consumercontact.com>> 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* < burke@ibiquity.com
>     <ma...@ibiquity.com>
>     > <mailto:burke@ibiquity.com <ma...@ibiquity.com>>> 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
>     dtam@consumercontact.com <ma...@consumercontact.com>
>
>

-- 
Don Tam
Manager, Software Development
(416)493-6111x143
dtam@consumercontact.com


Re: Why tabs look like buttons?

Posted by Bobby Rosenberger <br...@gmail.com>.
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 <dt...@consumercontact.com> 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* <burke@ibiquity.com
> > <ma...@ibiquity.com>> 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
> dtam@consumercontact.com
>
>

Re: Why tabs look like buttons?

Posted by Don Tam <dt...@consumercontact.com>.
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* <burke@ibiquity.com 
> <ma...@ibiquity.com>> 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
dtam@consumercontact.com


Re: Why tabs look like buttons?

Posted by Bobby Rosenberger <br...@gmail.com>.
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 <bu...@ibiquity.com> 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
>
>