Dynamic iFrame Height

  • 1
  • Question
  • Updated 2 months ago
  • In Progress
  • (Edited)
I have iframed a Visualforce page into a template field using the following code:

<iframe id="dupeI" src="/apex/c__DuplicateAlerts?id={{{RecordId}}}" width="100%" height="350px" frameborder="false" ></iframe>

The Visualforce page includes a table, so the height of it is dynamic.  This means if there's lots of records, the iframe has scrollbars.

I'd like to avoid this and set the height of the iframe dynamically to fit the Visualforce page, but so far I've had no luck.  I've found a couple of solutions online, but these are for standard webpages, and I haven't managed to get them to work in Skuid.

Examples I've found are:
Example 1
<iframe src="html_intro.asp" width="100%" class="myIframe"><br alt="" title="" name="" value="" type="" target="" rel=""><p>Hi SOF</p>
</iframe>
<script type="text/javascript" language="javascript"> $('.myIframe').css('height', $(window).height()+'px'); </script>
Example 2

In the <head> put:
<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>
Change the iframe to be:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
I've tried to put these into various places in the template field, but so far nothing has worked.  Do you know if this is possible in Skuid?
Photo of Sean Jolly

Sean Jolly

  • 70 Points

Posted 2 years ago

  • 1
Photo of Anna Wiersema

Anna Wiersema, Official Rep

  • 12,224 Points 10k badge 2x thumb
Hi Sean, I hope you're well.  Are you still experiencing this issue?  

It seems like it may be possible to accomplish this in Skuid using some of Example 2:

<iframe id="dupeI" src="/apex/c__DuplicateAlerts?id={{{RecordId}}}" width="100%" height="350px" frameborder="false" ></iframe>
<script>
	var iframe = skuid.$("#dupeI");	
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
</script>

What version of Skuid are you using?  Make sure you check "Allow HTML" in your template field :D
(Edited)