Styling CFDebug Output

Inspired by the fact that Sandra Clark is presenting to the PACFUG today on CSS, I figured this would be a good thing to share. But I’m just back from my honeymoon, so my value of what is worthy of sharing might be off..

I ran into this problem yesterday. Someone had styled their application with CSS using absolute positioning. This caused the application to overlap the cfdebug output rendering both unreadable.

There are a few ways around this:

1. Use debugging in dockable mode.
2. Add many <br>’s to the end of the page.
3. Add a div with ID around the output in the classic debug template.
4. Style the debugging output directly.

1 was out, because it’s a group development server, and the group hated the dockable version. 2 was out because it would have required altering every page of this particular application. 3 has the same issue as 1 for me… I don’t like to make changes to the server that might potentially effect everyone’s application. So I had to go with 4, and here’s how you do it:

<style>
table.cfdebug {position: absolute;  top: 2000px;}
table.cfdebug * {position: relative; top: 0;}
</style>

The first style declaration pushes the top level table with a style of cfdebug down 2000 pixels. The next one ensures that any child of the first table with a class of cfdebug does not get pushed down.

This form lends itself to solutions for other problems. Sometimes floats can cause the debugging to appear in odd places. With this you could float the cfdebug output, or a number of other things I can’t think of at the moment. Just make sure what ever attributes you set in the first declaration are reversed in the second.