HTML format CFGRID column data alignment

ColdFusion , CSS , Javascript , Tips and Tricks Add comments

I came across an issue yesterday where I wanted to control the alignment of certain columns in an HTML data grid using the ColfFusion \ ExtJS CFGRID.  At first I tried the "dataalign" and "headeralign" attributes of CFGRIDCOLUMN but after checking the docs it turns out that these are only available with grid formats applet \ flash.

Without delving into the ExtJS docs, I found a really simple method of doing this without having to write one line of Javascript.

<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. 

<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>

Credit goes to the following post http://www.webtrenches.com/post.cfm/quick-and-easy-column-alignment-for-cfgrid by @spraguey

Thanks!

Bookmark and Share

0 responses to “HTML format CFGRID column data alignment”

Leave a Reply

Leave this field empty:

Powered by Mango Blog. Design and Icons by N.Design Studio