How to achieve word wrapping for columns in Apex:dataTable

We have a few VF pages rendered as PDF which are using <Apex: dataTable>. This document is genereated in protrait size with 8 columns. It also include Product Name (80 char).

I want the text to be wrapped in each column. If I render the page as HTML then it works, but it does not work for PDF. I am even specifying the columnsWidth attribute.

Code:

<apex:dataTable width="100%" border="0" id="DataTable" value="{!SalesOrderLines}" var="SalesOrderLine" style="font-size:10px;vertical-align:top;word-wrap: break-word;"  headerClass="headerrow" 
   columnsWidth="60,250,90,50,95,100,100,100" rowclasses="odd,even" >


 <apex:column headervalue="Line">
             <apex:outputField value="{!SalesOrderLine.Name}"/>
 </apex:column>   
 <apex:column style="width: 200px;word-wrap:break-word" >
     <apex:facet name="header">

 {!$ObjectType.SalesOrderLine__c.Fields.Product__c.label}                                 
      </apex:facet>
        {!IF(SalesOrderLine.Product__r.name = null,SalesOrderLine.Product__c, SalesOrderLine.Product__r.name)}
 </apex:column> 
.......

</apex:dataTable>

I have even tried putting following style for <td> in the page

Code:

<style type="text/css">
  td {
    word-wrap: break-word;
  }
</style>

Does anyone has any idea, what is the best way to achieve word wraping for PDFs. This is very urgent !!!

I also

October 26, 2008
·
Like
0
·
Follow
1

Best Answer chosen by Admin (Salesforce Developers)

prageeth
Following code is working.
But there should atleast be two columns in the table.
If your problem is not fixed by this, please provide a sample code and then Ill try to help you.

<apex:page renderAs="pdf" standardController="Opportunity">
<head>
<style>
.column{
border:solid 1px green;
}
</style>
</head>
<apex:datatable value="{!opportunity}" var="v" headerClass="column" >
<apex:column headervalue="Header 1" width="10%" styleClass="column">
<DIV style="width:100%;overflow:hidden;">
<apex:outputField value="{!opportunity.account.Name}"></apex:outputField>
</DIV>
</apex:column>
<apex:column styleClass="column" headervalue="Header 2">

</apex:column>
</apex:datatable>
</apex:page>
Message Edited by prageeth on 10-04-2009 09:55 PM
Message Edited by prageeth on 10-04-2009 09:58 PM

October 4, 2009
·
Like
0
·
Dislike
1

BrianWK
I've had this issue too.

While this doesn't "Fix" the situation, it does act as a work around for some datatable columns. Instead of specifying the column's width, I restrict the Width of the whole table to 75% (or less). This usually makes the table "thin" enough to fit on a PDF page.

It doesn't always work though. Often what we see is that the text get's "Cut off" half way through the paragraph. So the text is wrapping in the column, but the PDF doesn't render the full column. Instead of the formatting changing the wrap parameters it simply removed a 1/4 of the paragraph.

December 29, 2008
·
Like
0
·
Dislike
0

prageeth
Try this.

<apex:column headervalue="Line" width="30%">
  <apex:outputPanel layout="block" style="width:100%;overflow:hidden">
   <apex:outputField value="{!SalesOrderLine.Name}"></apex:outputField>
  </apex:outputPanel>
</apex:column>

OR

<apex:column headervalue="Line" width="30%">
  <DIV style="width:100%;overflow:hidden">
   <apex:outputField value="{!SalesOrderLine.Name}"></apex:outputField>
  </DIV>
</apex:column>
Message Edited by prageeth on 08-24-2009 10:43 PM

August 24, 2009
·
Like
0
·
Dislike
0

yagna
I have the same requirement. I need to wrap a column in a VF page. I tried both options with no success. Any other ideas.
Message Edited by yagna on 10-02-2009 08:27 AM

October 2, 2009
·
Like
0
·
Dislike
0

This was selected as the best answer

yagna
Thank you. I found a solution similar to the one that you suggested.

Regards,
Yagna

October 5, 2009
·
Like
0
·
Dislike
0

RDeepa
Hi,

I am not able to wrap text inside the outputfield with the help of the given suggestion.

Could you please provide me any alternate suggestion if you have?

Regards,
Deepa

December 2, 2009
·
Like
0
·
Dislike
0

z_harika88
Hi,

I would like to achieve word wrap in visualforce page that renders as PDF.
Please help me how can i wrap the text in PDF?

Thanks,
Harika.

March 8, 2013
·
Like
0
·
Dislike
0

vikramraj muthayala
I too have an similar issue ... but nothing is working out from solution given.
Appreicate if any one had figured out the solution

November 12, 2014
·
Like
0
·
Dislike
0

Sotos
The problem is that the pdf renderer engine does not support CSS3 as of yet. The problem seems to exist only if there is a word without spaces that is longer than the specified column width. A workaround I found, is to manually break the column content and surround its parts with span tags and then apply a css class to the spans with float:left;

For example the following string:
"abcdefghijklmnop"
will become:
<span>abcdefghi</span><span>klmnop</span>

So if you have a column that only 10 characters can fit you will get two lines:

abcdefghi klmnop

You could easily create a method to manipulate long stings without spaces and specify every how many number of charactes that you want it to brake.

Hope this helps.

March 13, 2015
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

How to achieve word wrapping for columns in Apex:dataTable

All Answers

You need to sign in to do that.