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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .