I have a visual force page that I will be adding to a contact page as an iframe. In this visual force page I am using an outputPanel with a set height for overflow. I can just give it a set amount of pixels for the height but I would rather do it relative to the amount of pixels the user gives the iframe in the layout of the contact page. Any ideas?

enter image description here

The list of numbers goes on to 20 but it gets cut off after the 200 pixels that I set for the page in the layout. Here is the code for the page

<apex:pageBlock >
    <apex:pageBlockSection title="List Of Numbers" columns="2" >   
        <apex:pageBlockSectionItem id="columnWithScroll">
            <apex:outputPanel layout="block" style="overflow: auto; height: 80%;">
                <apex:repeat value="{!numbers}" var="number">
                    <apex:outputText value="{!number}" />
        <apex:pageBlockSectionItem id="columnWithoutScroll">
            <apex:outputPanel >
                <apex:outputText value="I don't want this section to move" />
                <apex:outputText value="If the left column gets too long" />
  • Ah, I understand now - you'd need to use some client side Javascript to do that for you I think - this might be useful blog.force365.com/2013/02/11/… Jul 7, 2014 at 16:16
  • That is not quite what I am looking for. I want the user to be able to control what size the iframe is on the contact page, rather than the iframe just resizing to fit into the page on its own Jul 7, 2014 at 16:50
  • ah ok, i misunderstood sorry Jul 7, 2014 at 17:14

1 Answer 1


I think the problem here is to measure the given static height of the iframe, where you can't use javascript to directly read the property because of XSS-limitations, right?

If so, we could try to figure out the given height indirectly. If you got the height, you can make your calculation an make relative adjustments to your content. I will not provide full code but my approach should be easy enough to follow:

  • start in vf-page which provide content for the iframe.
  • Personaly, I would use jquery but if this is the only requirement, you can go also with pure JS, like @sfdcfox mentioned below you would save resources. For the sake of the example assume you go with jquery.
  • in the markup first wrap all of your content with a <div id="wrapper" style="display:none;"> to hide everything.
  • Set body.sfdcBody height to 100% via CSS. Please make sure, it must take 100% of the iframe! Use firebug to verify and make your selectors strong enough to apply.
  • in a $( document ).ready(function() { ... }); do the following
  • Get the body's real height via: $("body.sfdcBody").get(0).clientHeight
  • Store it to a variable. Calculate your ratio.
  • make your content visible: $("wrapper").show();
  • use jquery's $("...").height( ) to update the height of the elements you need

Hope this is enough to get it done.

  • I can't condone the use of jQuery for two functions. It's a reckless waste of resources and loading time for just a few lines of code. Plus, there's better ways to do this.
    – sfdcfox
    Jul 7, 2014 at 18:51
  • @sfdcfox thanks for your feedback. I agree, if it sticks to just this two lines, its probably overkill. But usually the requirements will grow and jquery helps so much and costs so little. But for the sake of the example, let me just modify my answer a bit.
    – Uwe Heim
    Jul 7, 2014 at 19:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .