You need to sign in to do that
Don't have an account?
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)}"> </apex:outputLabel>
</td>
</apex:repeat>
</apex:panelGrid>
All Answers
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>
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..
You should be able to name the style differently and apply just that style to the particular instance of table data.
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>
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>
Kings Park, 17th Avenue, Team Valley Trading Estate, Gateshead, Tyne and Wear NE26 3HS United Kingdom
9 Tagore Lane Singapore, Singapore 787472 Singapore
312 Constitution Place Austin, TX 78767 USA
2334 N. Michigan Avenue, Suite 1500 Chicago, IL 60601, USA
620 SW 5th Avenue Suite 400 Portland, Oregon 97204 United States
888 N Euclid Hallis Center, Room 501 Tucson, AZ 85721 United States
1301 Avenue of the Americas New York, NY 10019 USA
The Landmark @ One Market
525 S. Lexington Ave
ShivChayaCo-opHsg.Soc;BangleAli,Roha-Raigad.Pincode-410206
sgsghdndndmfgmgy.h.hj.h.ig.igzd ndfmtu.uil;i;y;dylts;y;tsaem
00590000000UNvPAAW
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.....
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.
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
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.
You can't get a tooltip popup in PDF - that relies on html or javascript which the PDF plugin won't understand.
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.
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.
Hi Bob,
I have used the inline styles as follows:
In this case, the word-wrap CSS style is not working in PDF.
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.