I have a page where I'm putting in a lot of fields. The output labels are being rendered on several lines Here, social security # is going onto 3 lines

<apex:pageBlockSectionItem helpText="hepMe">
    <apex:outputLabel value="Social Security Number" />
    <apex:outputField value="{!obj.Social_Security_Number__c}" />

To get around this, I changed the implementation to pageblocksections

 <apex:pageBlocksection columns="1">
      <apex:pageBlockSectionItem helpText="help" dataStyle="text-align:left; width: 30%; max-width: 30%;">
           <apex:outputLabel value="Social Security Number" />
           <apex:outputField value="{!Obj.Social_Security_Number__c}" />


The CSS dataStyle="text-align:left; width: 30%; max-width: 30%;" is not being uniformly applied across browsers. it looks great in IE, but in FF the field columns are not lining up properly.

How do I fix this?

  • When you state that 'Social Security Number' is going onto three lines, do you mean that the label has breaks in the text and is displayed one word on each line?
    – Mark Pond
    Jan 17 '13 at 20:57
  • 1
    Out of curiosity, why you need to explicitly write all these tags and can't use only <apex:outputfield>? Have you tried applying !important in your css? stackoverflow.com/a/13823576/313628 Last but not least, can we get a screenshot of the issue? ;)
    – eyescream
    Jan 17 '13 at 21:40
  • I'm wondering why you're using pageBlockSectionItem at all. When you use <apex:outputField/> the label is implicitly included when you place it inside an <apex:pageBlockSection>. Did you go that route because of the formatting problem?
    – pchittum
    Jan 22 '13 at 17:32

Salesforce renders pageBlockSections as tables, and in the example you listed (because the columns attribute is set to 1) the pageBlockSectionItem is a row in the table. Essentially, you're changing the width of a column (using the dataStyle attribute). However, I'm assuming not all of your pageBlockSectionItems have their width set in your page.

To fix this, you will need to uniformly apply the css (dataStyle="text-align:left; width: 30%; max-width: 30%;") to all pageBlockSectionItems. Instead of applying the css to each tag, I suggest you include the following style.

<style type="text/css">
  .detailList {
      table-layout: fixed;
  .labelCol {
      text-align: left !important;
      width: 30% !important;
      max-width: 30% !important;

Also note that the .detailList and .labelCol CSS classes are owned by Salesforce. So, if Salesforce ever changed their CSS structure, or updated their interface, this would likely look very differently or, it may not work. If you'd like to avoid this, you can change the class names and add a styleClass=".your-class-name" attribute to each label.


If you are attempting to stop the text from wrapping within the outputLabel, you can use the CSS property white-space with a nowrap value to prevent the text from breaking into multiple lines of text.

You could apply this style to the labels using either a native element class that SalesForce renders (i.e. labelCol) or add your own styleClass attribute to the label to target your own specified elements... or directly on the label using the style attribute.

<style type="text/css">
    .noWrap { white-space: nowrap; }

<apex:outputLabel value="Social Security Number" styleClass="noWrap" />
  • I'm doing that, but now the column labels are not lining up. Jan 17 '13 at 21:54
  • A screenshot added to your original question along with all of the things that you are doing would be incredibly helpful. Especially since you make no mention of using the nowrap attribute in your original post.
    – Mark Pond
    Jan 17 '13 at 23:24

I think instead of dataStyle you must use dataStyleClass for pageBlockSectionItems

dataStyleClass="text-align:left; width: 30%; max-width: 30%;"

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.