Monday, April 11, 2011

Center CFGRIDCOLUMN Data Within a CFGRID

Problem:
I am displaying data in a CFGRID of format HTML and I want the data in two of the columns centered. I can't use the CFGRIDCOLUMN attribute dataAlign to center the data, as it only works with a CFGRID format of type flash when using ColdFusion 8.0. Since upgrading to ColdFusion 9.0 is not an option right now, I needed to find an alternate method.

Solution:
My CFM file containing the CFGRID is called testGrid.cfm. Within this file I linked an external CSS file named styles.css.

<link href="styles.css" rel="stylesheet" type="text/css" media="all">


I added the following CSS to styles.css:

#customgrid .x-grid-hd-1 {text-align: center;}
#customgrid .x-grid-col-1 {text-align: center;}
#customgrid .x-grid-hd-3 {text-align: center;}
#customgrid .x-grid-col-3 {text-align: center;}


I can now enclose the CFGRID tag with a <div id="customgrid"> tag and the 1st and 3rd heading and column data will be centered within their columns.

No comments: