Earlier today I blogged about ColdFusionBloggers and the category stats for 2008. I made a passing reference to how it would be nice to have a simple scrollable table for the stats. CFGRID would work, but I just wasn't in the mood for it. Andy Sandefer suggested cfpod and cflayout.
I tend to dismiss CFPOD when I discuss ColdFusion 8 Ajax features, but I gave it a quick shot with my giant HTML table from the earlier post.
<cfpod height="300" width="500" title="Stats">
11,813 entries.
<p/>
<table border="1" cellpadding="10">
lots of html here....
</table>
</cfpod>
<p>
Footer...
</p>
It worked rather well:

Ok, so I know a bit of CSS can turn a div into a scrollable region, but this seemed like a nice use of the tag and it was easy to implement.
Archived Comments
Why use cfpod at all? a <div> would have done the job
Actually that's a good tip - must make a note.
This ...
<div class="code" style="height: 300px; width: 500;">
... will give you a nice scrollable div that you can even embed in a BlogCFC post.
@Raul - Yeah, I did say it was probably easy CSS.... if you know CSS. ;)
@Rob - Thanks!
Nice usage. Every tag has its day!
That's a good bit of CSS to know. I'm so cf driven that I sometimes forget what's already out there. Cool trick @Rob.
I still think that cfpods and cflayouts have their uses and I use them in real live projects on a semi regular basis.
@Rob
Don't want to step on any toes, but actually your CSS code would not produce a scrollable DIV since the overflow text would be visible and not contained within the DIV. This is because a DIV without the "overflow" style applied will inherently display it's full contents.
Since others were using your code, I thought I would post a modified version of your code to create a scrollable DIV.
<div class="code" style="height: 300px; width: 500px; overflow:auto;">
<p>Velit esse cillum dolore ullamco laboris nisi ut enim ad minim veniam. Cupidatat non proident, quis nostrud exercitation sunt in culpa. In reprehenderit in voluptate lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Duis aute irure dolor cupidatat non proident, eu fugiat nulla pariatur.</p>
<p>Sed do eiusmod tempor incididunt sunt in culpa in reprehenderit in voluptate. Excepteur sint occaecat ut enim ad minim veniam. Quis nostrud exercitation sed do eiusmod tempor incididunt ullamco laboris nisi. In reprehenderit in voluptate ut enim ad minim veniam, sunt in culpa. Lorem ipsum dolor sit amet, qui officia deserunt ut aliquip ex ea commodo consequat.</p>
<p>Ullamco laboris nisi duis aute irure dolor ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt lorem ipsum dolor sit amet, ut enim ad minim veniam. Consectetur adipisicing elit, ut aliquip ex ea commodo consequat.</p>
<p>In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur. Ullamco laboris nisi ut aliquip ex ea commodo consequat. Qui officia deserunt sunt in culpa ut enim ad minim veniam. Ut labore et dolore magna aliqua.</p>
<p>Velit esse cillum dolore duis aute irure dolor cupidatat non proident. Eu fugiat nulla pariatur. Mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Quis nostrud exercitation excepteur sint occaecat.</p>
</div>
Obviously you would put the style information in a class and just add it to the DIV, something like:
.scrollable {
overflow: auto;
}
then on the DIV you add the class:
<div class="code scrollable">...</div>
Hi Jeff,
Sorry if I wasn't clear. The standard stylesheet that comes with BlogCFC has a class called "code" which already has those attributes, so unless you have changed that, it should work as I described.
Cheers,
-Rob
Hello Rob,
My apologies then. I did not know that those styles were already applied. Guess I should have looked deeper first.
Please tell me that I'm not the only one with Friday-itis... I tried to grab the scrollbar handle in Ray's example and drag it. I must have tried ten times until it dawned on me that it was an image and not an embedded table.
<sigh> Must...have...beer (or sleep...interchangeable at this point)
I did that trick just for you. ;)
but now here is the problem. Let's say you have a search form on the page outside the pod. Inside the pod is the results of the search. The search results are huge so you don't want to scroll forever and decide to paginate. Using the javascript:Coldfusion.Navigate to move through the pages keeping the page number in the url.
BUT when it loads up again the form is in there twice. How do you stop it from doing that?
I'd have to see your code. If you decide to share it, use a service like Pastebin.