1

I am trying to make some text and different graphics, that are generated from formula fields, be the same size on a VF page.

What it currently looks like:

enter image description here

I want everything to be 30px tall. I have tried to add the style class to each outputfield but that doesn't seem to do anything.

Here is my base code:

<apex:page standardController="Employees__c" tabStyle="Employees__c">
    <apex:pageBlock title="Icons Of Guidance"> 
        <apex:outputField value="{!Employees__c.Inactive__c}"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <apex:outputField value="{!Employees__c.In_Window_to_be_Seen__c}"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <apex:outputField value="{!Employees__c.Priority_Code__c}"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <apex:outputField value="{!Employees__c.Age_Yrs__c}"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <apex:outputField value="{!Employees__c.GenderIcon__c}"/>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <apex:outputField value="{!Employees__c.Verbally_Confirmed_Phone_Update_Age__c  }"/>
    </apex:pageBlock>
</apex:page>

Here is what I have tried to make everything same size:

 <apex:page standardController="Employees__c" tabStyle="Employees__c">
        <apex:pageBlock title="Icons Of Guidance"> 
            <apex:outputField value="{!Employees__c.Inactive__c}" style="height:30px;"/>
....
</apex:page

1 Answer 1

1

The style attribute on outputField only affects the outer span tag. Instead, use the styleClass attribute.

<style>
.px30 img {
  height: 30px;
}
</style>

...

<apex:outputField styleClass="px30" value="..." />

Note:

I just found this in the docs:

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. (Emphasis added).

Apparently, apex:outputField is finicky. I found an alternative structure that does appear to work using the style from above (tested in my dev org):

        <apex:pageBlockSectionItem dataStyleClass="px30">
            <apex:outputLabel>{!$ObjectType.Account.fields.Image__c.Label}</apex:outputLabel>
            <apex:outputField value="{!Account.Image__c}" />
        </apex:pageBlockSectionItem>
2
  • Thanks @sfdcfox but it is not reacting to that either.
    – Matt M
    Commented Jul 18, 2017 at 17:53
  • @MattM You may need to resort to an apex:pageBlockSectionItem. Updated with another example.
    – sfdcfox
    Commented Jul 18, 2017 at 19:22

You must log in to answer this question.

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