1

Have read thru various approaches but having a problem formatting a VisualForce tabPanel . I'm almost there but can't seem to get rid of the light shaded square border around each tab.

BEFORE adding CSS update:

enter image description here

AFTER adding CSS update

.rich-tabhdr-side-cell {border-top:none;}
.rich-tabhdr-side-border {background-image:none;}

enter image description here

Here's the VisualForce tag and related CSS. Any suggestions ? I added the SalesForce style as well which looks good but want to have more control over the code.

<apex:stylesheet value="/sCSS/21.0/sprites/1297816277000/Theme3/default/gc/versioning.css" />

<apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel" headerClass="tabPanel" activeTabClass="activeTab" inactiveTabClass="inactiveTab" >

<!-- LOB Workers Comp -->
<apex:tab label="*Workers Comp" name="tab1" id="tab1"  rendered="{!IF(CONTAINS(Account_Summary__c.Lines_of_Business__c,'WC'),"true","false")}" > 
<apex:tab label="*Pers Auto" name="tab1" id="tab1"  rendered="{!IF(CONTAINS(Account_Summary__c.Lines_of_Business__c,'PA'),"true","false")}" > 

CSS :

.rich-tabhdr-side-cell {border-top:none;}   
.rich-tabhdr-side-border {background-image:none;}

.tabPanel {
   border: none !important;
   }

.activeTab {
    background-color: lightblue;    
    background-image:none; 
    font-size: 18px;
    border-radius: 50px 20px;
    border: none !important;    
    }
.inactiveTab {
    background-color: lightgrey;    
    background-image:none;
    font-size: 12px;
    color:blue; 
    border-radius: 50px 20px;
    border: none !important;
}
3
  • try border: none !important; . – Ross Bassett Mar 15 '17 at 22:01
  • Added this and updated CSS in post. Still seeing the light border . Any ideas ? – rickmac Mar 15 '17 at 22:11
  • Chrome developer tools are your friend. Maybe the border belongs to an element not in your CSS? – Ross Bassett Mar 15 '17 at 22:24
1
.rich-tabhdr-side-cell {border-top:none;}
.rich-tabhdr-side-border {background-image:none;}

That should do it.

2
  • Excellent Toby. Works. I updated the source above with CSS and the before/after pic. Are there more of these classes defined somewhere ? I could not find these on the chrome elements debug. Do you see them on yours ? – rickmac Mar 16 '17 at 14:31
  • Yea, I used the developer tools in chrome to find them. It just takes a little getting used to. Fortunately for you I have already suffered through something very similar so i just had to go into my existing CSS to find it. – gNerb Mar 21 '17 at 18:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.