The other day I had the need to align some data in an html cfgrid. There are some alignment attributes of the cfgriditem tag, but they do not work in html grids. I tried wrapping the data in a span tag with some css aligning it, but that didn’t work either.

But there is a way. When CF8 generates the grid it writes out CSS ids and classes that you can use to style the grid. For example to right align the 5th column you can use this:

.x-grid-td-5 {text-align:right;}

The number you need to use in the class name does not always match up with the column. Sometimes I had to use .x-grid-td-8 to reference the 6th column for example. I think the number increments for each cfgrid item, even if you have display=no.

If you have more than one cfgrid on your page and only want to align the nth column in one of them, you can wrap the cfgird in a div with an ID so you can reference only that grid in your CSS.

One Comment

  1. Tim says:

    Is this the case for CF9? If you need to bind your cfgrid you must use html format. If you use html format – then good luck formating your output to look nice. Sorting doesn't work and removing the sort buttons (sort="no") doesn't change anything.

    Sometimes I feel you had to be on the CF development team to make any sense of it.