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; . Mar 15, 2017 at 22:01
  • Added this and updated CSS in post. Still seeing the light border . Any ideas ?
    – rickmac
    Mar 15, 2017 at 22:11
  • Chrome developer tools are your friend. Maybe the border belongs to an element not in your CSS? Mar 15, 2017 at 22:24

1 Answer 1

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, 2017 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, 2017 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.