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.

3 thoughts on “Styling CFDebug Output

  1. I had the same problem when my design centered the content on the page but also centered the CF debug data.

    My solution wasn’t as good as yours but I removed the style for centering the content in dev and added it back when it went back into production.

    I will try this one next time.

    Like

  2. I’ve recently broken into css and encountered the same problem so for those who look after this =D

    .cfdebug,.cfdebuglge{text-align:left}

    oh, Nice Blog, is the source available?

    Like

Leave a Reply to Terrence Ryan Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s