function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SPDSPD 

Wrapping text inside table cell

Hi...

 

I have a requirement to wrap a text inside a table cell...i have a panelgrid inside which im using repeat. inside repeat i have used a td tag where i am giving it a fixed width...but i am not able to wrap a text if it is too long..this affects the alignment in my table...can any one suggest a proper method to do it...

 

 

<apex:panelGrid >
<apex:repeat value="{!ProcessCellValuesWithoutName}" var="strCellValue">

<td width="200" align="center">

<apex:outputLabel rendered="{!(!strCellValue.renderLink)}">{!strCellValue.recValues}</apex:outputLabel>
<apex:outputLabel rendered="{!(!strCellValue.renderLink)}">&nbsp;&nbsp;&nbsp;</apex:outputLabel>

</td>

</apex:repeat>
</apex:panelGrid>

 

Best Answer chosen by Admin (Salesforce Developers) 
stephanstephan
The second to last row, and the one above it, have a dash in the string. The browser can wrap on either white space or a dash.

All Answers

bob_buzzardbob_buzzard

You can do this through styling. The following works for me:

 

<style> 

td

 

{

white-space: pre-wrap; /* css-3 */

white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

word-wrap: break-word; /* Internet Explorer 5.5+ */

 

</style> 

SPDSPD

hey Bob thanks for your reply..it does work..but there are two issues..

 

1. it works differently in different browsers..

2. i want to apply the wrapping only for above mentioned code....but this gets applied to entire <td> ..is there any solution?  i used id attribute..but it didnt work..

bob_buzzardbob_buzzard

You should be able to name the style differently and apply just that style to the particular instance of table data.

 

 

SPDSPD
Sorry i didnt get what you are trying to say....
bob_buzzardbob_buzzard

You should be able to do something along the lines of:

 

<style> 

#wrapping

 {

white-space: pre-wrap; /* css-3 */

white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

word-wrap: break-word; /* Internet Explorer 5.5+ */

 

</style>  

 

and then in your table:

 

<td><div id="wrapping"> your text here </div></td>

SPDSPD
yes..thats what i did... it didnt work...
stephanstephan

Try this:

 

 

<style> .wrapping { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } </style> and then in your table: <td class="wrapping">your text here</td>

 

 

SPDSPD
nope...doesnt work...
stephanstephan
Can you be a little more clear? What are you seeing relative to what you expect? A screenshot may be helpful.
bob_buzzardbob_buzzard
Something that I maybe should have mentioned earlier - the style I provided breaks on whitespace.  If you are attempting to break midword based on a width, I don't think it will be of any use.
SPDSPD
 
    
United Oil & Gas, UK
 00590000000UNvPAAW     00590000000UNvPAAW     

Kings Park, 17th Avenue, Team Valley Trading Estate, Gateshead, Tyne and Wear NE26 3HS United Kingdom    

 

United Oil & Gas, Singapore
 00590000000UNvPAAW     00590000000UNvPAAW     

9 Tagore Lane Singapore, Singapore 787472 Singapore     

 

Edge Communications
 00590000000UNvPAAW     00590000000UNvPAAW     

312 Constitution Place Austin, TX 78767 USA     

 

 
    
 
    
Grand Hotels & Resorts Ltd
 00590000000UNvPAAW     00590000000UNvPAAW     

2334 N. Michigan Avenue, Suite 1500 Chicago, IL 60601, USA     

 

Express Logistics and Transport
 00590000000UNvPAAW     00590000000UNvPAAW     

620 SW 5th Avenue Suite 400 Portland, Oregon 97204 United States     

 

University of Arizona
 00590000000UNvPAAW     00590000000UNvPAAW     

888 N Euclid Hallis Center, Room 501 Tucson, AZ 85721 United States     

 

United Oil & Gas Corp.
 00590000000UNvPAAW     00590000000UNvPAAW     

1301 Avenue of the Americas New York, NY 10019 USA     

 

sForce
 00590000000UNvPAAW     00590000000UNvPAAW     

The Landmark @ One Market     

 

Burlington Textiles Corp of America
 00590000000UNvPAAW     00590000000UNvPAAW     

525 S. Lexington Ave     

 

Niit
 00590000000UNvPAAW     00590000000UNvPAAW     

ShivChayaCo-opHsg.Soc;BangleAli,Roha-Raigad.Pincode-410206     

 

SeedSys            
 00590000000UNvPAAW     00590000000UNvPAAW     

sgsghdndndmfgmgy.h.hj.h.ig.igzd ndfmtu.uil;i;y;dylts;y;tsaem     

 

CyberinfoSys                       
 

 00590000000UNvPAAW   

 

00590000000UNvPAAW     abcabcabcabcacbcbcbcbcbcbcbcbcaabababajklblaaiahchaha;;j;aj;a;;a;asaas;;asnc;asnc     


Message Edited by SPD on 03-23-2010 05:36 AM
SPDSPD

you see i seem to be having a problem when the text is as in the last row.... else i dont even need to use the style attribute...see for other rows...

 the text does wrap...the problem arises only for last row...can you identify what could be the problem.....

bob_buzzardbob_buzzard

The final element of the last row doesn't look to have any whitespace in it.  Is that correct?  If so, the browser won't attempt to wrap it as it doesn't know where to sensibly break.

 

I guess you can either add some whitespace into your data, break it up controller-side or use the LEFT/RIGHT functions to limit the number of characters to display.

 

One mechanism I've used before is if the field is larger than a particular size, to display 'hover to view' and then display the actual data as a tooltip type popup.

 

 

SPDSPD
yes..the last element does not ave any white space in between...but if you see even the secondlast and the one above it also has no white space...but they still are wrapped
stephanstephan
The second to last row, and the one above it, have a dash in the string. The browser can wrap on either white space or a dash.
This was selected as the best answer
SPDSPD

Thanks Stephan. I was unaware of that..i greatly appreciate your support...Yes ofcourse i am thankful to you also Bob...appreciate the patience with which you both answered my doubts...

 

Thanks and Regards,

Shailesh.P.Deshpande

z_harika88z_harika88

Hi Bob,

 

I have created a PDF generated using visualforce page "renderAs" attribute. The content in the PDF was not wrapped as it contains some text without white space.

 

You have mentioned the following in your previous reply:

"if the field is larger than a particular size, to display 'hover to view' and then display the actual data as a tooltip type popup."

 

If possible please provide the sample code to get a tooltip type popup in the visualforce PDF.

 

Regards,

Harika.

bob_buzzardbob_buzzard

You can't get a tooltip popup in PDF - that relies on html or javascript which the PDF plugin won't understand.

z_harika88z_harika88

Hi Bob,

 

Thanks for your reply.

 

Is there any workaround to wrap the continuous text into multiple rows. I have used some CSS styles like word-wrap:break-word,it is working fine if i remove renderAs attribute. But the CSS styles are not working when the page is rendered as PDF.

 

 

 

bob_buzzardbob_buzzard

Hmm.  I'd expect the css to still apply when generating PDF.  Are these inline styles or in stylesheets?  I've found that I have to use inline styles quite a bit to get the style applied.

z_harika88z_harika88

Hi Bob,

 

I have used the inline styles as follows:

 

<apex:dataTable value="{!obj}" var="obje" border="1" rendered="{!obj.size>0}" style="table-layout:fixed;width:800px;">
<apex:column headerValue="Objective Name" style="word-wrap:break-word">
<apex:outputText value="{!obje.Name}"></apex:outputText>
</apex:column>
<apex:column headerValue="Objective" style="word-wrap:break-word">
<apex:outputText value="{!obje.Objective__c}"></apex:outputText>
</apex:column>
<apex:column headerValue="Strategies" style="word-wrap:break-word">
<apex:outputText value="{!obje.Strategies__c}"></apex:outputText>
</apex:column>
</apex:dataTable>

 In this case, the word-wrap CSS style is not working in PDF.

bob_buzzardbob_buzzard

Not sure I can be of any more assistance I'm afraid.  I usually use regular HTML tables for PDF and the inline styles tend to be respected  That said, I don't recall using the word break styling in a PDF.