Print this page

styleClass does not work with apex:outputField

Knowledge Article Number 000187689
Description The output field content does not inherit the class style, if we use styleClass in <apex:outputfield> tag 

Example code to replicate the issue :- 

1:- Create a VF page with following code :-
<apex:page standardController="Account" standardstylesheets="false" showHeader="false">
	<apex:form >
		<style>
		.sample {
		    font-weight: bold;
		}
		</style>
	  	<apex:outputField value="{!account.name}" styleClass="sample" />
	  	<apex:outputText value="-------->>>>>Styled Text in a sample style class" styleClass="sample"/>
	</apex:form>
</apex:page>

2:- Access the page with an account id like :- https://c.naX.visual.force.com/apex/styleclass?id=0019000000XXXX


The styleclass is being applied on <apex:outputtext> but not on <apex:outputfield>

Output:- Grand Hotels---------->>>>> Styled Text in a sample style class
Resolution Instead Use the styleClass in <apex:outputpanel> to apply the styles. 

Example code :- 

1:- Create the VF page with following code :- 

 
<apex:page standardController="Account" standardstylesheets="false" showHeader="false">
	<apex:form >
		<style>
		.sample {
		    font-weight: bold;
		}
		</style>

		<apex:outputpanel styleClass="sample" > 
		  <apex:outputField value="{!account.name}"/>
		  <apex:outputText value="-------->>>>>Styled Text in a sample style class" />
		</apex:outputpanel>
	</apex:form>
</apex:page>
2:- Access the page with an account id like :- https://c.naX.visual.force.com/apex/styleclass?id=0019000000XXXX

Output :- Grand Hotels---------->>>>> Styled Text in a sample style class

Dev Doc: Apex:outputPanel




promote demote