Automatically resize Inline visualforce components on standard pagelayout?

Question

Is there a way to automatically resize the inline visualforce components on standard page layout based on the content of the visualforce page.

Update

Has anyone used this app or link to implement automatically resize inline visualforce component

App is not working for orgs with custom domain.Someone please help me.

Answer 1

I don't believe there is, from what I recall I've always had to set a static height. Unfortunately the standard page layout and the Visualforce get served up from different domains, so you can't do any cross site scripting to access the Visualforce page's parent and resize the iframe.

The alternative is using a custom VF page to replace the Standard Page Layout (using apex:detail) and appending your Visualforce customizations to the bottom.

Answer 2

I made this work with jquery - it is not very portable, but does seem to work...

I have a case detail page with some inline VF components. I also have a VF page that overrides my Case Detail page but displays the standard case detail via an apex:detail tag. That way, I can change the size of the VF components via JS on the case detail override page. As I say, it ain't pretty but it does work...

<apex:page standardController="Case" extensions="CaseTaskExtension">

<apex:stylesheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"/>
  <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" />
  <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" />

<script type="text/javascript">
       var j$ = jQuery.noConflict();


       j$(document).ready(function(){

         var commentsize =  '{!ccsize}'; //param from controller
          if (commentsize > 0 && commentsize < 200) {
          commentsize = 200;
          }

  //Replace with Id of VF Page that is used for inline component

         j$('#066i0000000GTnI').css('height', commentsize);

        });
 </script>  

<apex:detail subject="{!case.Id}" showChatter="true" relatedList="true" relatedListHover="true">

</apex:detail>
</apex:page>

Answer 3

Yes

You need to add some javascript to your visualforce page and a static resource of javascript.

---

What to Add

1. This answer demonstrates how to add a static resource of javascript and have it run on pageload. In order to resize your visualforce page, you'll need to use the following code in the static resource:

   var iframe;
   
   function hideInjectionBox() {
       // optionally, hide the link box that this link is displayed in
       // if you are using more than one custom links box, this probably won't work
       document
           .querySelector("div.linksModule.sidebarModule")
           .style
           .display = "none";
   }
   
   function initHelper() {
       // all modern browsers support postMessage--if you need to support
       // < IE 8, then you'll have to use another method.
       if (window.postMessage) {
           iframe = document.getElementById("id-of-your-visualforce-page");
   
           if (iframe) {
               // use the event listener system supported by the current browser
               var eventMethod = window.addEventListener 
                   ? "addEventListener" : "attachEvent";
               var eventer = window[eventMethod];
               var messageEvent = eventMethod == "attachEvent" 
                   ? "onmessage" : "message";
   
               eventer(messageEvent, ReceiveMessage, false);
           }
       }
   }
   
   function ReceiveMessage(event) {
       // use the origin method supported by the current browser
       var originMethod = event.origin ? "origin" : "domain";
   
       // if your browser uses the domain method (instead of origin)
       // then you won't want to include the http://
       if (event[originMethod] != "http://domain-of-my-iframe.example.com) {
           // bad domain
           return;
       }
   
       iframe.style.height = event.data;
   }
   
   window.onload = function() {
       hideInjectionBox();
       initHelper();
   }
   

2. On your visualforce page, add the following javascript:

   <script>
       function SendMessage(message)
       {
           if (window.postMessage)
               parent.postMessage(message, "*");
       }
   
       window.onload = function() {
           // offsetHeight may or may not work in your browser,
           // but there is plenty of documentation of alternatives
           SendMessage(document.body.offsetHeight + 10 + "px");
       }
   </script>
   

---

Explanation

The code you just added allows the iframe that your visualforce page is loaded in to communicate with its parent using javascript's postMessage function.

Here's how it plays out when the page loads:

1. Your custom link loads in visual force and runs REQUIRESCRIPT to load your static resource.
2. the static resource executes the code in the window.onload section which
   • hides the custom link section
   • prepares to receive a message from another domain
3. the iframe on the page loads your visualforce page.
4. your visualforce page executes its window.onload section which sends a message to the webpage which contains the iframe. The message tells the static resource what height to make the iframe.
5. the static resource receives the message and sets the height of the iframe accordingly.