When using the CFGRID tag (type="html"), there is no built-in way to align the data in the columns. The dataalign attribute of the CFGRIDCOLUMN tag is not available for the HTML grid type. There is a simple CSS trick to align the columns.
Each column in the grid has its own css class, and there is also a class that applies to all columns. The x-grid-col class allows you to apply formatting to all of the columns at once, for example: .x-grid-column {text-align:right;}. The rest of the columns have numbers associated with them, starting with 0 as the first column. So, the code below aligns all of the grid columns to the right, then sets only the first and second columns to align left.
<style type="text/css">
.x-grid-col {text-align:right;}
.x-grid-col-0 {text-align:left;}
.x-grid-col-1 {text-align:left;}
</style>
You can also update just the column headers using a similar method. The headeralign attribute of cfgridcolumn also doesn't work for HTML grids.
<style type="text/css">
.x-grid-hd {text-align:center;}
.x-grid-hd-0-0 {text-align:left;}
.x-grid-hd-0-1 {text-align:left;}
</style>
Great tip! Very helpful.
and to re-enable text wrapping for the table,
.x-grid-row td {white-space:normal;}
it didn’t work straight off for me, but you should be able to do it per column with
.x-grid-td-1 {white-space:normal;}
now if only there was an easy to override column widths. this doesn’t work because it’s overridden by the javascript that sets up the table…
.x-grid-col-1 {width:100%}
Nice quick tip. Thanks.
I’m not sure why
.x-grid-row td {white-space:normal;}
didn’t work “straight off”, though I’m sure it has to do with the cascade order. Adding an ID specifier (for the form ID in my case) made it work:
#frmMyForm .x-grid-row td {white-space:normal;}
THANK YOU ALittleSlow! I’ve spent HOURS googling trying to figure out how to wrap text in cfgrid and it ONLY brings me to flash (not html) cfgrid various methods I couldn’t figure out how to apply or just didn’t seem to work. Mike’s little style snippet and your form ID variant works, finally!!
THANKS. Works Great!
Gold, cheers mate
Had to use .x-grid-col-1 {text-align:center;} to center the first column, not .x-grid-col-0 {text-align:center;}. Other than that, great tip.
Thanks!
Thanks. Works like a charm.
I’m trying to use this but I’m not able to hide the underline on a href that I put on a cfgridcolumn … any idea ?
Nice post I Like your site very well and continue to do so. I have bookmarked your site.
Hello,
I have a demo on http://www.cfforum.eu/examples/srappaille/cfgrid/styles.cfm
The sources are available on http://www.cfforum.eu/viewtopic.php?f=16&t=631 (with french comments, sorry)
Best regards
Hai,
first of all i’m sorry if my english not to good.
I have problem with this tips, when i have more than one cfgrid all of them will follow the css. I just think i might need more than one css, but i don’t know how…??
Any idea ??
Thanks before,
Lady
@Lady – This should work if you specify the grid names in the CSS so that it only applies to the grid you want.
Example:
Hai Mr. Michael…
thanks for your tips, but i’m so sorry, it seemed didn’t work out for me
i had tried this :
But when i used it, all of my cfgrid became at left position.Infact i have 4 cfgrid, 1 is cfgrid that called data2 and others were ongrid,offgrid and totgrid and they have the same position as ongrid cfgrid.
I do really hope that u can help me solving my problem.
Thanks again,
Lady
@lady – I’m sure this can be done with just CSS. If you send me your sample page, I can take a look and recommend something. Also, let me know which version of CF. mike at brockettcreative dot com
Hai Mr. Michael….
Thank you for being so helpfull to solve my problem.
This is the sample of my simple program and i’m using CF 8.
select column_name
from information_schema.columns
where table_name = ‘credit’
and table_schema = ‘credit_db’
select column_name
from information_schema.columns
where table_name = ‘credit_ongap’
and table_schema = ‘credit_db’
select date_format(date,’%Y-%m-%d’) as date,name
,#colnamecrd.column_name[j]#
from credit_ongap
where date = ‘#form.date#’
select date_format(date,’%Y-%m-%d’) as date,name
,#colnamecrd.column_name[j]#
from credit_ofgap
where date = ‘#form.date#’
select date_format(date,’%Y-%m-%d’) as date,name
,#colnamecrd.column_name[j]#
from credit_grdgap
where date = ‘#form.date#’
select column_name
from information_schema.columns
where table_name = ‘credit_ongap’
and table_schema = ‘credit_db’
select column_name
from information_schema.columns
where table_name = ‘credit_ofgap’
and table_schema = ‘credit_db’
select column_name
from information_schema.columns
where table_name = ‘credit_grdgap’
and table_schema = ‘credit_db’
Note that CF9 updated to ext 3. To get the cfgrid to wrap text in CF9 you need to apply the white-space: normal to .x-grid3-cell-inner (did not test all browsers!). You can find the full file at CFIDE\scripts\ajax\ext\resources\css\ext-all.css. It notes in comments some of the bugs in the current version that can save hair-pulling and hours of googling
Did anybody resolved issue about aligning columns when multiple cfgrid exists on the same page?
Beside that, I have another problem…
Although head topic works for me on normal cfm page on CF9 (when added “.x-grid3-cell-inner {white-space:normal;}”) it doesn’t work on page that is displayed in cfwindow.
I have cflayout type=”tab” displayed in cfwindow and cfgrids on two cflayoutarea, but aligning does not work at all, even if I have only one cfgrid. I have tried to put styling in main cfm file but it did not work either.
Any ideas?
Hi there!
I have managed to align columns in multiple cfgrids on one page using following code:
By putting cfgrid inside
It works even on cfgrid displayed in cfwindow (at least in FireFox)!
BUT, the problem is that columns are aligned only when cfwindow is opened for the first time (or after main page is refreshed)?!?!!?
If I close cfwindow and open it again, columns in cfgrid are not aligned!
Please help!!!
Thank you so much for this tip. I am working on an accounting application and being able to align numbers to the right is absolutely essential. I would have had to have rewritten my code entirely if this hadn’t worked.
BTW – I found that in CF9 the class is named x-grid3 and so styles would be .x-grid3-col{text-align:right}; etc
Thanks for nice quick tips