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 |
sfdcFanBoy 
One Reply to “A Tip A Day #38 – PageBlockTable Wrap Text”