function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Lori StippLori Stipp 

How to change font size of an apex:relatedList

I have looked everywhere but I haven't found an answer, so here goes....

I have replaced a custom object's Detail page with a VF page that displays the usual object details, and then displays the related lists in a tab panel, where each related list is in a separate tab. I've found numerous examples of that, and it all works great.

However, the default font size of the items in the related lists is quite small (smaller than what's used in standard SF). How can I control the styling of
apex:relatedList? There is no class attribute on apex:relatedList, only id. But I've tried specifying an id and adding some css to style it, but nothing changes.


Here's an excerpt from my code:

<apex:page standardController="Quote__c" showHeader="true"  sidebar="true" tabStyle="Quote__c" >
     
    <style>
        .activeTab {font-size:12px; background-color: #236FBD; background-image:none; color:white;  border: 2px solid; border-radius: 10px;  box-shadow: 3px 3px 5px #BEBEBE;}
        .inactiveTab {font-size:12px; background-color: #BEBEBE; background-image:none; border-radius: 10px;}
    </style>

   ....display the Quote__c detail panel here....

  .... here are the tabbed related lists....

<apex:tabPanel switchType="client" selectedTab="tabQuoteContact"
                  id="QuoteTabPanel" tabClass="activeTab"
                  inactiveTabClass="inactiveTab" >
                 
    <apex:tab label="Quote Contacts" name="QuoteContacts"
                id="tabQuoteContact" >
        <apex:relatedList list="Quote_Contacts__r"  />                   
    </apex:tab>
     
    <apex:tab label="Order Information" name="OrderInfo" id="tabOrderInfo">
        <apex:relatedList list="Orders__r" />          
    </apex:tab>

...more of the same for other related lists of Quote__c....

Best Answer chosen by Lori Stipp
Bhawani SharmaBhawani Sharma
Just do  inspect element in your browser and try to findout which style is being used. then override that style ising your custom css.

All Answers

Bhawani SharmaBhawani Sharma
Just do  inspect element in your browser and try to findout which style is being used. then override that style ising your custom css.
This was selected as the best answer
Lori StippLori Stipp
Thank you so much! I should have thought of that myself. 

For others who might run into the same problem, I added the following to my css, and it increased the font size of everything in the tab panel. 

.rich-tabpanel-content {font-size:12px;}

Best regards!
Bhawani SharmaBhawani Sharma
Thanks Lori! Great to hear that it has been resolved.
Can you please mark this as resolved so it can help others who will be looking for the same thing in future?