3

In a Dev Org, I have a Visualforce Page where I have

<apex:outputField value="{!item.Cost__c}" styleClass="item-cost"/>

but the Visualforce Page doesn't apply the class item-cost to the span-element. <apex:outputText> does apply the styleClass, so I am using it as a work-around.

Is this a bug, or am I missing something?

9

While cropredy's answer cites the correct documentation:

The style class used to display the output field component, used primarily to designate which CSS styles are applied when using an external CSS stylesheet. This attribute may not work for all values. If your text requires a class name, use a wrapping span tag.

From this VF documentation on styleClass property https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_outputField.htm

His solution is invalid. The documentation refers to the use of a wrapping span tag, which should wrap the apex:outputField tag itself. You must still provide a valid value in the "value" property.

The correct implementation is:

<span class="item-cost">
<apex:outputField value="{!item.cost__c}"/>
</span>

However, the use of a span tag here is probably limiting in most cases. The use of an outputPanel with layout="block" provides a div tag which can be more helpful.

<apex:outputPanel layout="block"> 
<apex:outputField value="{!item.cost__c}"/>
</apex:outputPanel>

As well as placing the apex:outputField in a pageBlockSectionItem grouping, as the other poster noted, should that fit the situation.

3

Sadly, this is a documented limitation (from the VF Developer's Guide)

The style class used to display the output field component, used primarily to designate which CSS styles are applied when using an external CSS stylesheet. This attribute may not work for all values. If your text requires a class name, use a wrapping span tag.

You can try the approach suggested in the doc:

<apex:outputField>
   <span class="item-cost">{!item.cost__c}"</span>
</apex:outputField>
  • Yea, it seems like it'd be easy for Visualforce to add the class, but maybe there's a good reason for the limitation. Oh well. – Scott Pelak Nov 23 '14 at 1:19
  • I'm guessing it has to do with a lot of built in styles that SFDC feels should be guaranteed in apex:outputField for use cases like checkboxes, datetimes, multi-select picklist, currency, etc. – cropredy Nov 23 '14 at 1:21
  • This should not be the accepted answer because it's wrong. See kfblake's answer. – Semmel Mar 22 '16 at 14:04
  • 1
    Mod's can't change that, only @ʞɐʃǝԀʇʇoɔS can. – Samuel De Rycke Mar 23 '16 at 16:18
3

You totally can!

The trick is that it takes instruction from the parent component, usually an apex:pageBlockSectionItem - then apex:outputText will respect it.

Change from this:

<apex:outputField value="{!item.Cost__c}" styleClass="item-cost" />

to this, and you're good to go!

<apex:pageBlockSectionItem dataStyleClass="item-cost">
    <apex:outputField value="{!item.Cost__c}" />
</apex:pageBlockSectionItem>
1

You can use html-class instead.

In your case, try:

<apex:outputField value="{!item.Cost__c}" html-class="item-cost"/>
  • This is the correct solution, awesome! – CommonCoreTawan Sep 8 at 11:16

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.