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?

Improve this question

4 Answers 4

Reset to default
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.

Improve this answer
0
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>
Improve this answer
4
  • 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, 2014 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, 2014 at 1:21
  • This should not be the accepted answer because it's wrong. See kfblake's answer.
    – Semmel
    Mar 22, 2016 at 14:04
  • 1
    Mod's can't change that, only @ʞɐʃǝԀʇʇoɔS can.
    – Samuel De Rycke
    Mar 23, 2016 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>
Improve this answer
1

You can use html-class instead.

In your case, try:

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

You must log in to answer this question.

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