A Tip A Day #38 – PageBlockTable Wrap Text

This post is a part of the daily blog series 

A Tip A Day, daily dosage of learning!


Day #38 – Wrap Text in PageBlockTable Columns

I have a pageBlockTable on Products.  The table displays Product Name and its Description.  The description field is long text area and generally, the descriptions length is long.  In fact, so long that the description text makes the table stretch ridiculously wide.

I tried fixed and varying widths for both the tables, columns, used rowClasses, columnClasses and all kinds of formatting to the wrapping done.  But the simplest solution for wrapping text is using the property “white-space” in the column style.

Solution

I had to make 2 style updates to get this done.  One for the pageBlockTable and one for the column.

The pageBlockTable style should be style=”table-layout:fixed” and the description column style should be style=”white-space:normal”

<apex:pageBlockTable value="{!Products}" style="table-layout:fixed" var="prod">
   <apex:column headervalue="Name" value="{!prod.Name}"/>
   <apex:column style="white-space:normal;" headervalue="Desc" value="{!prod.Description__c}"  />
</apex:pageBlockTable>

Output

Name Description
Matching Outfits Dress2Match.com  Dress to match.  Dress to be outstanding together.  Matching clothes and accessories for people: be it lovers, family, friends, twins, siblings or couples!

There are many options for the white-space property.  I will let you play with them.  Follow the PLAY links in the below table to learn more about each option.

CSS Syntax – WHITE SPACE

Here’s some background on white-space styling for your reference from w3schools.  You can change the wrap style as per your needs using the below table.

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;
Property Value Description TRY
normal Sequences of whitespace will collapse into a single whitespace. The text will wrap when necessary. This is default Play»
nowrap Sequences of whitespace will collapse into a single whitespace. The text will never wrap to the next line. The text continues on the same line until a
tag is encountered
Play»
pre Whitespace is preserved by the browser. The text will only wrap on line breaks. Acts like the pre tag in HTML Play»
pre-line Sequences of whitespace will collapse into a single whitespace. The text will wrap when necessary, and on line breaks Play»
pre-wrap Whitespace is preserved by the browser. The text will wrap when necessary, and on line breaks Play»
initial Sets this property to its default value. Read about initial Play»
inherit Inherits this property from its parent element. Read about inherit 

Read all other tips of the blog series here – A Tip A Day, daily dosage of learning!


Enter your email address to follow this blog and receive notifications of new posts by email.

Join 256 other followers

Advertisements

One Reply to “A Tip A Day #38 – PageBlockTable Wrap Text”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s