You need to sign in to do that
Don't have an account?
Lori 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....
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....
All Answers
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!
Can you please mark this as resolved so it can help others who will be looking for the same thing in future?