Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Manu ErwinManu Erwin 

Troubles with headerClass and headerClassActive attributes in panelBar and panelBarItem tags

I am able to apply styles to a number of elements in my visualforce page however I am unable to get the headerClass or headerClassActive attributes working properly. The contentClass works fine but the others don't.

Does anyone have suggestions on what I'm missing? Apologies in advance for the terrible colours - I'm using them for easier identification of what's working/failing.
Code:
/* generic html selectors */
body
{
 font: 75% tahoma, sans-serif;
 color: white;
 background-color: grey
}
p
{
 background-color: orange;
 color: yellow;
}
/* specific salesforce class selectors */
.header
{
 background-color: grey;
 color: black
}
.active
{
 background-color: white;
 color: pink
}

 
Code:
<apex:page id="styleClassProblem" label="styleClassProblem" name="styleClassProblem" showHeader="false" sidebar="false" standardStylesheets="false">
 <apex:stylesheet id="theStylesheet" value="{!$Resource.styleSheet}"/>
 This text correctly inherits the body style
 <apex:panelGrid id="thePanelGrid" columns="2" width="100%">
  <apex:panelGroup id="thePanelGroup">
   <apex:panelBar id="thePanelBar" height="200px" width="350px" headerClass="header" headerClassActive="active">
    <apex:panelBarItem id="firstPanelBarItem" label="first" name="first" contentClass="header">
     The panelbar above should inherit the 'active' style
     <p></p>
     This text correctly inherits the header style for content
     <p>This paragraph correctly inherits the p style</p>
     <apex:outputText value="This outputText apex tag correctly inherits the 'active' style class" styleClass="active"/>
    </apex:panelBarItem>
    <apex:panelBarItem id="secondPanelBarItem" label="second" name="second">
     The panelbar above should initially inherit the 'header' style and then when viewed the 'active' style
     <p></p>
     This text does not inherit the body style
     <p></p>
     <apex:outputText value="This outputText apex tag correctly inherits the 'header' style class" styleClass="header"/>
    </apex:panelBarItem>
   </apex:panelBar>
  </apex:panelGroup>
 </apex:panelGrid>
</apex:page>

EDIT: Added picture


thanks in advance,
manu



Message Edited by manu on 02-07-2008 11:20 AM
jwetzlerjwetzler
Hi Manu.

I used the Firebug firefox extension to see why you were getting overridden here.  It looks like there is more than just the background-color that you need to override.  There is also a background-image.  So if you put background-image: none in your header class definition that should give you what you need.

Let me know if that works.

Thanks,
Jill
Manu ErwinManu Erwin
Jill,
firstly a big thankyou :) for pointing me in the direction of FireBug - I've used it before but never appreciated how VERY useful it is - specially for inspecting css elements and seeing what is being overridden etc.

As you can see in the below picture even when I include 'background-image: none' into my .active class it is not taking precedence over the existing VF class.



I have to manually turn off three styles in the VF stylesheet before mine will become active (as seen in this pic).



Am I missing something in how I'm building my css?

thanks again,
manu


Message Edited by manu on 02-08-2008 06:53 AM
jwetzlerjwetzler
Hmmm, I'm not sure why it's not working for you.  I copied in your code exactly, adding in the background-image:none; and it works fine.  The "header" and "active" classes get tacked on after the dr-pnlbar-h-act class so, as you know, everything you declare in header and active should override the values in the panel bar class.

This is what you have?
Code:
<apex:page id="styleClassProblem" label="styleClassProblem" name="styleClassProblem" showHeader="false" sidebar="false" standardStylesheets="false">
  <style>
    /* generic html selectors */
    body
    {
      font: 75% tahoma, sans-serif;
      color: white;
      background-color: grey
    }
    p
    {
      background-color: orange;
      color: yellow;
    }
    /* specific salesforce class selectors */
    .header
    {
      background-color: grey;
      background-image: none;
      color: black
    }
    .active
    {
      background-color: white;
      background-image: none;
      color: pink
    }
  </style>
  This text correctly inherits the body style
  <apex:panelGrid id="thePanelGrid" columns="2" width="100%">
    <apex:panelGroup id="thePanelGroup" >
      <apex:panelBar id="thePanelBar" height="200px" width="350px" headerClass="header" headerClassActive="active">
        <apex:panelBarItem id="firstPanelBarItem" label="first" name="first" contentClass="header">
          The panelbar above should inherit the 'active' style
          <p></p>
          This text correctly inherits the header style for content
          <p>This paragraph correctly inherits the p style</p>
          <apex:outputText value="This outputText apex tag correctly inherits the 'active' style class" styleClass="active"/>
        </apex:panelBarItem>
        <apex:panelBarItem id="secondPanelBarItem" label="second" name="second">
          The panelbar above should initially inherit the 'header' style and then when viewed the 'active' style
          <p></p>
          This text does not inherit the body style
          <p></p>
          <apex:outputText value="This outputText apex tag correctly inherits the 'header' style class" styleClass="header"/>
        </apex:panelBarItem>
      </apex:panelBar>
    </apex:panelGroup>
  </apex:panelGrid>
</apex:page>

 
jwetzlerjwetzler
So if I move your css into a static resource it doesn't work.  If I include it directly in the page it does.

I am looking into this for you.
jwetzlerjwetzler
Ok, so I am by no means an expert at CSS, and I did not realize that the order in which your stylesheets are linked matters.  If you look at the source for your page, your resource is listed before that of one of our automatically included css files.

So the good news is that switching the order of those two resources will fix your issue.  The bad news is that you'd probably have to use a script tag and do some DOM manipulation to change the order.

I will log a bug for us to look into doing this automatically, but that's not going to help you now.  My suggestion is that you either use a <script> tag to move your linked stylesheet to right before the end of the head tag, or that you include the css style directly on your page in a <style> tag.

I hope this helps!

Jill
Manu ErwinManu Erwin
Thanks for looking into this Jill.

Good to know it is a bug!! Well you know what I mean...........was very puzzled for awhile there.

The inline css style with a <style> tag has worked a treat.

Thanks for the workaround.
TopalovichTopalovich
Hi, Jill.  Sorry to restart an old thread, but I have not seen anything else related to CSS inheritence, more specifically the formatting of certain items such as panelBar and toolBar.  I use both of these elements fairly extensively in my apps, and I was wondering if there was anything on radar to update the elements to either inherit the color scheme defined by the tab (i.e. primaryPalette / secondaryPalette) or change the inheritence ordering to allow for CSS stylesheets defined in Static Resources to take precedence over the Salesforce stylesheets.  It's not the end of the world to have to hard code the style elements in the VisualForce page, but at the end of the day since I can't upgrade VF pages in a managed package, I can't push out style updates if I need to make changes moving forward...not to mention the in-page style definitions limit customization for package installers because if they change the tab style, they will be stuck with the hard-coded VisualForce style elements until they manually update the VF page.


Thanks,

Michael Topalovich
Delivered Innovation