Want to change the height of the home page component dynamically

Question

I have a home page component that has a custom VF Page behind it. Want to change the height of the home page component dynamically as the content gets added like how recent Item component lengths changes dynamically. How can I do that in JavaScript or VF Page?

Code example: Home Page Component :

<style>#sidebarDiv .sidebarModule .sidebarModuleBody{    padding:0px;}</style><iframe style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; WIDTH: 200px; HEIGHT: 290px; BORDER-TOP: medium none; BORDER-RIGHT: medium none" src="/apex/todo"></iframe>

Component with custom VF page: todo list - add the list item in the list

<apex:page docType="html-5.0" sidebar="false" showHeader="false"  standardStylesheets="false"   >
<html>
<head>

<title>To doApp</title>
<style>
    html {
        font: small/1.4 "Lucida Grande", Tahoma, sans-serif;
    }

    div.enter_todo {
        margin: 0;
        padding:5px;
        height:25px;
        width:160px;
        background: #eee;
        border:1px solid #aaa;
    }

    div.todo_list {
        margin: 10px 5px 10px 0px;
padding:2px;        
    }

    div.todo_list > div.todo {
        background: #eeeeff;
        min-width:150px;
        max-width:170px;
        min-height:25px;    
        padding-top:2px;    
        margin-top:1px;
    }

    div.todo_list > div.todo > div {
        float:left;     
    }

    div.todo_list > div.todo > div.todo_description {
        margin-left:0px;
    }

    div.todo_list > div.checked {
        text-decoration: line-through;
        background: #eee;
    }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var j$ = jQuery.noConflict();

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

        j$('#add_todo').click( function() {
            var todoDescription = j$('#todo_description').val();

            j$('.todo_list').prepend('<div class="todo">'
                + '<div>'
                    + '<input type="checkbox" class="check_todo" name="check_todo"/>'
                + '</div>'
                + '<div class="todo_description">'
                    + todoDescription
                + '</div>'
            + '</div>');

            j$('#todo_form')[0].reset();

            j$('.check_todo').unbind('click');
            j$('.check_todo').click( function() {
                var todo = $(this).parent().parent();
                todo.toggleClass('checked');
            });
            return false;

        });  


    });
</script>
</head>
<body>

    <div class="enter_todo">
        <form id="todo_form" action="/apex/todo" method="POST">
            <input type="text" size="12" id="todo_description" name="todo_description"/>
            <input type="submit" id="add_todo" value="Add"/>
        </form>
    </div>

    <div class="todo_list">
    </div>  
</body>
</html>

</apex:page>

score 5 · Answer 1 · edited Apr 13 '17 at 12:54

As soon you a Visualforce page is used, the solution provided by @Bruce will fail and @Faisal is right: it simply won't work becaus of XSS protection mechanisms of the browser and the usage of different domains by salesforce.

The only way is to inject custom JS in the standard salesforce pages, which can be accomplished using some workarounds: End of javascript sidebar workarounds?

In the injected JS side you need something like this:

window.addEventListener("message", elfMessageRouter, false);
function elfMessageRouter(event) {
    // params
    //      string  action = "iframeResize"
    //      string  name   = title of iframe
    //      int     height = new height in px
    if(event.data.action == "iframeResize") {
        var iframeElement = $("iframe[title='"+ event.data.name +"']").get(0);
        if( iframeElement ) {
             $( iframeElement ).css("height", event.data.height );
        }   
    }
    return;
}

In your vf-page you'll do something like that

window.parent.postMessage( { action: "iframeResize", name:"nameOfApexPageInSalesforce", height: $("body.sfdcBody").get(0).clientHeight } ,'*');

You will have to call the resizer every time your content changes it's size or the window's size is changing. If you get it right, your salesforce Iframe will look great! This technique is also usable for embedded vf-pages on layouts.

Your answer was valid until salesforce 16 releases. But It appears salesforce has imposed extra security layer on it. are you aware about it or have any other work around for it? If you have please let me know. Feel free to reach out me on prabhakaraiit@gmail.com Thanks, Prabhakar — , Oct 27 '15 at 19:57
All that is well known. Find all details here http://salesforce.stackexchange.com/questions/38918/end-of-javascript-sidebar-hacks/41840#41840 - it will work at least until spring'16 as shown there. I think salesforce is doing that to early, since Lightning Experience and Lightning Components are still BETA and no viable alternatives yet. Please consider to upvote that question, answer and the linked questions, since it might show them how important this still is. — Uwe Heim, Oct 28 '15 at 05:03

Want to change the height of the home page component dynamically

1 Answers1

Linked