Floresense Resource center: Firefox inner iframe height doesn't refresh

About / Contact Home

Support Desk Resource Center Products/Services

Firefox inner iframe height doesn't refresh

Posted by: Floresense Team

Support you have an Iframe in a portion of your webpage and you have mentioned its height=100%, in Firefox browser, when your is resized or the container of the iframe is resized, the height of iframe doesnt adjust to occupy 100% of container. probably this is a rendering bug with firefox. this doesn't happen with IE.

Example:
   <tr>
    <td width=100% height=3>
     <div id='toolbar'>
      <img src="images/temp_toolbar.gif" 
           height=33 width="520"/>
     </div>
    </td>
   </tr>
   <tr>
    <td height=100% id='webpartNews'>
     <iframe id='newsPanel' frameborder="1" 
          src="newsPanel.php" width=100% 
          height=100%>
     </iframe>
    </td>
   </tr>

In the above example, if toolbar goes hidden due to an user action on the UI to close it, then there is more space for the IFrame in the container cell below the toolbar.. and the browser should resize the container and the IFrame automatically. This doesn't happen in Firefox

Two possible workarounds are discussed here.
Both methods rely on manually forcing firefox to re-render

Method 1: Refresh height of IFrame.

Steps:
1. Copy the style.height value of the IFrame.
2. Modify the style.height property of the IFrame.
3. Reset to original height value.

Below methods do just this. with a timeout to ensure that the size refresh happens after the space was created for the IFrame to expand.

//timeout is secs
function callResize(objId,timeout)
{
 if (!timeout)
  timeout=0;
 timeout *= 1000;
 
 setTimeout("refreshContainerHt('"+objId+"')",timeout)
}

function refreshContainerHt(objId)
{
 $(objId).style.height='99%';
 setTimeout("$('"+objId+"').style.height='100%'",100);
}

A typical call would be:

callResize('webpartNews',.5);

Method 2: Refresh contents of container having the IFrame.

This can be done with javascript as below.
1. Copy the contents of the parent container of the iframe (this includes the html tags <iframe)
2. post blank content to the container so that the iframe and other content is emptied.
3. post copied contents from step1 back to the container.. as if its new content.. and this forces firefox
to re-ender the new dom and the problem is fixed.

1. There will be flicker on the container when you do this. because we blank out the contents.
2. Do this refresh after the resize operation or other operation that varies the container height..is fully complete. otherwise the refresh doesn't do much help.

An example scenario is when you javascript frameworks like scriptaculous to slide up or down a portion of content on the webpage becos of which other areas of the page could extend or enlarge. In this scenario, say the animation takes .5 secs or 500 millisecs to slide up another container to create more space for the iframe. Then we should do our refresh after 550 millisecs or later preferably.

I frequently use the below methods to refresh contents inside a pane. Note the contents are not refreshed with an ajax call, its just copied, container emptied and pasted back. The below functions could be suitably modified to refresh contents from an ajax call.

//timeout is secs
function callRefreshContent(objId,timeout)
{
 if (!timeout)
  timeout=0;
 timeout *= 1000;
 
 setTimeout("refreshContent('"+objId+"')",timeout)
}


function refreshContent(objId)
{
 if ($(objId) && $(objId).innerHTML)
 {
  var tempContent = $(objId).innerHTML;
  $(objId).innerHTML = '';
  $(objId).innerHTML = tempContent;
 } 
}

A typical call to refresh the object would be:

callRefreshContent('webpartNews',1);