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


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.

  • 5
    Take a look at the AppExchange reviews for the app, it seems to be hitting some issues. The link you gave reveals likely the reason why, both will be doing this by poking into the page definition Salesforce creates, which is bad practice, since in doing so one needs to make some assumptions in their code that will likely break in the future as this is not supported, I've +1 the answer below its the reality sadly and the safest direction. Jan 23, 2014 at 16:29
  • @AndrewFawcett App is not working for one of my org with custom domain else it working fine in other orgs without custom domain.
    – sfdc
    Apr 9, 2014 at 19:57

3 Answers 3


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.


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();


         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);


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



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
            .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
        iframe.style.height = event.data;
    window.onload = function() {
  2. On your visualforce page, add the following javascript:

        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");


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.

You must log in to answer this question.

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