Note:The Free and Commercial hyperlinks above will take you directly to DWfaq.com's store where you can read about my extensions. The Cartweaver links below will take you to their website. If you'd rather stay on this site, be sure to read my message where you'll find links to brief descriptions for your convenience.
Note: I only wrote the extensions for Cartweaver 3 for Application Dynamics Inc., not the application itself.
Note: The links below are only the most recent titles that I've been involved with. Follow the links below to visit the official book website.
Warning: Some of the images in the Medical section section are very graphic in nature. If you cannot stand the sight of blood, it is advised that you skip these images.
All ImagesOsteochondromaCurrent Filter:
Category: CSS
Date Range: 4/5/2008
(clear
filters)
I Googled. I googled some more. I found lots of blogs where people asked in the comments how to wrap text in a CFGRID tag, but either no answer was given or the format was Flash.
Well, for the sanity of those on the same mission I was on, I shall blog the solution that satisfied my quest. (It may or may not satisfy yours depending on what you're trying to achieve.)
A simple line of CSS did the trick in my use case:
div .x-grid-cell-text{white-space:normal;}
UPDATE: To fix IE, add display:block; to the rule above.
That's it, one line of CSS. Hope it helps!
Posted by ~Angela | Comments (8) | Add Comment | Permalink
Comment from Alex Yohn on 9/18/2009
Chrome works if you add display:block;
Comment from Alex Yohn on 9/18/2009
Did discover that the fix does not work in Chrome, but IE 7, IE 8, FF 3.x, and Safari (win) 4.0x. (Haven't tested MACs yet.)
Comment from Alex on 9/18/2009
Actually, I found an issue. With CF9 (yeah I know...beta), you must edit the ext-all.css to get this effect to work. Line 2114 is the:
.x-grid3-cell-inner, .x-grid3-hd-inner{
overflow:hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
padding:3px 3px 3px 5px;
white-space: nowrap;
}
Change the white-space:nowrap; to white-space: normal;
Done!
Comment from BJ on 8/21/2009
I used the hack on my cfgrid. When it first loads the grid the wrap doesn't work but if I click on the column name then it will wrap correctly and show me all the information. So I still have the problem on the initial loading of the form. I hate IE.
Comment from Ryan on 2/17/2009
Angela - thanks this was very helpful. Have you found a way to wrap the text inside of the editing area?
For example, I have a word-wrapped cell with 3 lines of text and double click to edit it - but it shows the contents in one long line.
Thanks for the help,
Ryan
Hi Ryan,
I didn't see that behavior on mine I don't think... If you send me a link to look at your example I can see what yours is doing differently. (Sorry for not replying sooner.) If you've already solved the problem, please share the solution.
Good luck to you! ~Angela
Comment from Brian on 9/5/2008
That actually failed for me on IE7 with an html cfgrid, but the following works great:
.x-grid-row td {white-space:normal)
Thanks for sharing Brian. I have yet to check it out to see why things worked differently for me but I'm glad to hear you've got a solution that works for you. I may need it some day! :-) ~Angela
Comment from Flüge on 8/28/2008
FINALLY!!!! Very well then! I was searching second day in a row for this simple solution. I was supposed to give up...Thanks!
Great; glad to help! ~Angela
Comment from Chad on 4/9/2008
Good one! I did not think of introspecting the CSS and modifying it.
Only bummer is it does not work in IE, but i came close to getting it to work with this:
td {word-wrap:break-word;width:50px;left:0;}
Of course applying to all TD's is not the greatest, but it appears this word-wrap css only works on td. it did not work on div's.
Thanks Chad... I'll have to go back and see if it worked for me in IE or not, it might have been due to a more specific rule that I used rather than what I posted. I'll post back my findings later.
As for re-defining the td, if you place the entire cfgrid in a div and id that div, <div id="divGrid"> you can make a more specific rule , #divGrid td which will limit the wrap effect to that table only.
I'll be giving your code a whirl too, as I had not thought to do break-word like that. Thanks again! ~Angela