iFrame Not Resizing In CMS

Not sure who here is working on content management pages using iFrames but there is a bug within SN (i think only becomes an issue in IE rather than firefox, but I can’t remember since they’ve blocked firefox useage here). The issue is that when the iframe is loaded, the size of the iframe automatically gets resized according to the content of the form.

Working in the CMS, you’ll probably be using iFrames a lot, Even though they’re out of fashion now, they do the job for what we need in ServiceNow. Except in one scenario. Let me explain…

When the iFrame is initially loaded, it is sized automatically according to the size of the content within the frame.

If however anything was to happen on the screen which makes the height of the form taller (add error/info messages, showing additional fields, attaching documents etc), the submit button could disappear as the iframe is not resized again and the submit button would fall outside of the iframe border.

The button can be accessed using either the tab button, or draggnig and scrolling down, but obviously neither is very user friendly.

So I was tasked with finding a solution. It’s not elegant, but it works. The solution is to resize the iframe every second, so if anything were to change on the screen, the page would be resized and all buttons still shown.

The fix lies within the render_content_block_iframe ui macro.

The fix was to add the function:

function autoResize(id){ var newheight; var newwidth;

if(document.getElementById){

newheight= (document.getElementById(id).contentWindow.document .body.scrollHeight > 450) ? document.getElementById(id).contentWindow.document .body.scrollHeight : 450 ;

newwidth= document.getElementById(id).contentWindow.document .body.scrollWidth;

}

document.getElementById(id).height= (newheight) + “px”;

document.getElementById(id).width= (newwidth) + “px”;

}

Then to edit:

function sizeFrameOnload(event) { contentFrameSize(‘${jvar_frame_name}’, false);

}

to look like this:

function sizeFrameOnload(event) { setInterval(function(){ autoResize(‘${jvar_frame_name}’); },1000); }

And that’s it. The page will then resize every second. The issue is however you are editing an out of the box ui macro, so only edit if you really must.

Essentially all I’ve done here is to calculate the height of all the visible items on the screen and resize the iFrame according to this value.

Hope you find this useful.

4 Comments

  1. I’m still a newbie on SN development but this article describes exactly the problem we are having. I hope to use this technote to solve my issue. I have to wait for help from a more experienced developer simply because I don’t know where to place the functions etc. and I’m a little nervous trying it on my own without knowing exactly where to put everything. Just wanted to say Thanks! I’ll add a new comment when I find out if it solves our issue. Definitely bookmarking this site!

    Like

  2. Nice Solution. I’ve solved it buy UI Script and

    (function() {
    if(document.getElementsByTagName(‘iframe’).length>0)
    {
    var frame = document.getElementsByTagName(‘iframe’)[0];
    frame.onload = function() { window.parent.scrollTo(0,0);}
    }
    })();

    Like

Leave a 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s