Handling CFDIV's resizes

This post is more than 2 years old.

Omer asks:

I am using cfdiv to allow users to browse videos without refreshing the whole page. The problem I am facing now is that when the user hit the next link to show 10 next videos, the div starts loading the stuff and it resizes (get smaller with the loading message) and when the videos load, it goes back to its original size. I want to know how can I keep the size of div same even when ajax is loading the stuff.

The issue Omer is talking about can be demonstrated with the following code. Our root page will simply have: <h2>Header</h2>

<cfdiv bind="url:test3.cfm" />

<p> My footer... </p>

The file test3.cfm will generate some images:

<cfloop index="x" from="1" to="5"> <cfset a = imageNew("", 120,70, "rgb", "green")> <cfset imageDrawText(a, "Image #x#", 5, 12)> <cfset sleep(200)> <cfimage action="writeToBrowser" source="#a#"> <br/><br /> </cfloop> <cfoutput><a href="#ajaxLink('test3.cfm')#">Reload...</a></cfoutput>

Note the reload link in there. If you run this, you will notice an odd resizing of the cfdiv every time the content is reloaded. This is so exciting I decided to make a movie out of it. (Mac Firefox 3 Users: Remember to click in the upper left hand triangle. Jing is aware of the bug and says it will be fixed soon.)

Luckily this is rather easy to fix. The cfdiv tag will accept any normal CSS attributes. I changed my code like so:

<cfdiv bind="url:test3.cfm" style="background-color: red;width:100%;height:500px" />

The red background was just to help make it a bit clearer, and to share some late Christmas spirit. What's important is the width and height. I picked values that made sense for my content. This now results in...

Pretty easy!

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Andy Sandefer posted on 1/6/2009 at 7:53 PM

Thanks for this post. I've been annoyed by this in the past with cfdiv.

Comment 2 by Justin Johnson posted on 1/6/2009 at 8:02 PM

You'll want to be careful with how you use the height attribute, it can sometimes cause content to overlap or look awkward if the content is shorter than the specified height (depending upon your layout)

It would be better to target the id of that div using CSS. That way you can give a minimum-height to it (min-height) which will allow the content to grow if it's taller than the minimum height, applying this with css via a stylesheet also allows you to target this for IE6 (which doesn't support min-height) but treats height as min-height

Just thought I'd throw in my 2 cents...

Comment 3 by Raymond Camden posted on 1/6/2009 at 8:10 PM

How dare you disparage my CSS skills?!?!?


Comment 4 by Andy Sandefer posted on 1/6/2009 at 8:58 PM

I hate designers, but only because I cannot perform graphic design tasks beyond the skill level of small primates.

Comment 5 by Kumar posted on 1/6/2009 at 11:47 PM

If you are like me and like you keep your layouts purely in HTML/CSS, wrap the cfdiv around a HTML div tag, with the HTML div tag handling your layout style.

Comment 6 by Mikel posted on 9/20/2012 at 6:59 PM

Thanks Joe. This works great!

For those that stumble across this it works quite well in CF8.

Comment 7 by RT posted on 7/1/2013 at 11:26 PM

Hey. Is there any way to load the jquery mobile plugin inside of a cfdiv?

Comment 8 by Raymond Camden posted on 7/2/2013 at 2:10 AM

Please see my response to your other comment.