Dynamically resizing CFWINDOW to fit content

Question

Am currently working on a site that uses a lot of cfwindow objects and I was wondering if anyone knows of a way to dynamically resize the window so that all the content fits in without the need for scroll bars.

I have tried using the overflow=visible configuration but it doesnt seem to make a difference.

Thanks in advance for any advice.

Answer 1

Well, this is kind of classic task when using pop-ups for displaying images. It was done by measuring the image size and resizing spawned window using window.resizeBy(w,h). This is still applicable method, I think.

Second similar option is calculating the needed size on the server-side and passing to the cfwindow attributes width and height. Say, you can capture the content into the cfcontent and check its length in characters.

Please note that both these methods are not reliable when you are working with text content, because rendering the fonts can be really different for users. So, reserving some additional height can be useful.

Other tricky way is to check if scrollbars are present, for already opened window. There's an attribute scrollHeight which you can compare with clientHeight and increase the height. This can possibly produce some ugly "jumping" effects in some browsers, but it should work.

I was interested and tried quick test of last method. First spawned pop-up with w/h=200 and this answer text (words above) as contents. Next I did this in pop-up window:

<script type="text/javascript">
window.onload = function() {

    // check the size before resize
    alert("Window Width = " + window.innerWidth + "\nWindow Height = " + window.innerHeight + "\nScrollHeight =  " + document.body.scrollHeight);

    if (window.innerHeight < document.body.scrollHeight) {
        // here's where we can play with resize steps and other specific trickery
        // now we're trying to expand size a bit
        window.resizeBy(window.innerWidth + 50, window.innerHeight + 50);
    }

    // check the size after resize
    alert("Window Width = " + window.innerWidth + "\nWindow Height = " + window.innerHeight + "\nScrollHeight =  " + document.body.scrollHeight);

}
</script>

Alert #1:

Window Width = 200
Window Height = 200
ScrollHeight =  783

Alert #2:

Window Width = 450
Window Height = 450
ScrollHeight =  358

Please note that I'm not 100% sure (and can not check right now) that window.innerWidth/Height attributes will work in IE -- you should consider also document.documentElement.clientWidth/Height attributes.

Hope this helps.