+ Start a Discussion
p1_dfsp1_dfs 

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
Best Answer chosen by Admin (Salesforce Developers) 
prageethprageeth

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

All Answers

BrianWKBrianWK

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.

prageethprageeth
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
yagnayagna
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
prageethprageeth

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
This was selected as the best answer
yagnayagna

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

 

Regards,

Yagna 

RDeepaRDeepa

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

z_harika88z_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.

vikramraj muthayalavikramraj muthayala
I too have an similar issue ... but nothing is working out from solution given.
Appreicate if any one had figured out the solution
SotosSotos
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.