There is actually CSS styling you can do in huge detail on CFGRID, but it isn't provided with the standard documentation, so it is totally metaphysically obscure. None of it seems able to remove the invasive underline should you be crazy enough to use HREF in your CFGRID, but aside from that, everything else seems do-able.
Here are the three little things I critically needed to find and use:
1. TEXT WRAPPING in CFGRID
It would just truncate my text in every row. Since it won't let you size the grid by % but insists on a hard coded pixel number, that just made it worse.
Your CFGRID must be in a CFFORM. Give that an ID value. Mine:
<cfform name="myform" id="myformid">
<CFGRID . . .
Then in your stylesheet do the following:
<style>
#myformid
.x-grid-row td {white-space:normal;}
</style>
That will make it wrap. The above means it affects everything 'inside' the 'myformid' ID value, and it affects the entire grid, and all the row, and the table cells within the grid rows, and the white-space:normal makes that wrap.
2. HEADER ROW STYLING in CFGRID
I wanted the header row of labels to look different than the default. I know everyone loves those silver gradient skins but the top row seemed to sort of fade into unnoticed in this case. There is another style that lets you mess with that:
.x-grid-hd-text {background-color: #D9CCFF; color: #661A99; font-size: 120%; font-weight: bold;}
That'll do it.
3. ROW HOVER STYLING in CFGRID
I'd set all these style values but the entire row color change when you mouse over it wasn't changing, and it was some kind of cyan-like color by default. Looked really interesting with my purple-based grid as you might imagine. I finally found the code to change that row-sized hover color:
.x-grid-row-over td { background:#661A99;}
So there you have it. To set my row styling, text wrapping, and a decent hover, I had this:
<style type="text/css">
#myformid
.x-grid-row td {white-space:normal; text-decoration: none;}
.x-grid-hd-text {background-color: #D9CCFF; color: #661A99; font-size: 120%; font-weight: bold;}
.x-grid-row-over td { background:#661A99;}
</style>
And it looks like this:
4 comments:
I can't get this to work. My CFGrid is in a cfform format="flash" ...
I've tried this in my style sheet, in the header of the page and inside the cfform tag. No luck.
Thanks for any help!
The Flash and HTML approaches to CFGRID work a little differently. For the most part I think the flash is a lot easier; html seems to have more limitations (and maybe more bugs). I've only done the HTML approach unfortunately. You might try the CFDOCS which do seem to work more seamlessly, at least I assume, with the flash (at least I hope so!).
Many thanks this styling was driving me nuts. Tony D.
when I used your suggestion to have the header text wrap :
.x-grid-header-text td {white-space:normal;}
It looked OK. But when I sorted the wraped column and then hit any other column, scroll bars appeared on both the left and bottom of the grid.
hefterr
Post a Comment