[SalesForce] Set outputPanel height relative to size of page

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}" />
                    <br/>
                </apex:repeat>
            </apex:outputPanel>
        </apex:PageBlockSectionItem>
        <apex:pageBlockSectionItem id="columnWithoutScroll">
            <apex:outputPanel >
                <apex:outputText value="I don't want this section to move" />
                <br/><br/>
                <apex:outputText value="If the left column gets too long" />
            </apex:outputPanel>
        </apex:pageBlockSectionItem>
    </apex:pageBlockSection>
</apex:pageBlock>

Best Answer

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.

Related Topic