How do I get my Customer Portal to auto-adjust its component's size?

Question

I have a few HTML Home Page Custom Components titled Custom_News, Custom_Articles, and CUstom_Cases.

Here's the HTML for them:

<iframe src="/apex/NewsPage?id=a1TW0000000EJAL" frameborder="0" width="100%"></iframe> 

<iframe src="/apex/Custom_Home" frameborder="0" width="100%"></iframe> 

<iframe src="/apex/CasesPage" width="100%" frameborder="0"></iframe> 

This is what my Customer Portal Home Page layout looks like:

enter image description here

and this is what the Custom Components look like when I login to the Customer Portal:

enter image description here

How do I get rid of the scroll bars? I want the Customer Portal to auto adjust to the size of the components so that none of the components will have scroll bars. How do I do this?

score 2 · Answer 1 · edited May 23 '17 at 12:30

2

You could try modifying the height of the iframes dynamically with JavaScript. This answer explains how to accomplish this.

Here's an example using the JavaScript provided:

<script language="JavaScript">
<!--
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById(id)){
        newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
        newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;
    }

    document.getElementById(id).height = (newheight) + "px";
    document.getElementById(id).width = (newwidth) + "px";
}
//-->
</script>

<iframe src="/apex/NewsPage?id=a1TW0000000EJAL" frameborder="0" width="100%" onLoad="autoResize('iframe1');"></iframe> 

<iframe src="/apex/Custom_Home" frameborder="0" width="100%" onLoad="autoResize('iframe1');"></iframe> 

<iframe src="/apex/CasesPage" width="100%" frameborder="0" onLoad="autoResize('iframe1');"></iframe> 

edited May 23 '17 at 12:30

Community

1
1

answered Jun 05 '12 at 15:40

Matt K

7,207
5
39
60

What part of Salesforce do I put the Javascript file in? How does the iframe part know where to look for the autoResize function? – Di Zou Jun 05 '12 at 20:28
Try adding it before one of your iframe tags. – Matt K Jun 05 '12 at 20:33
I added it before the iframe and changed the iframe code and it didn't do anything. The scroll bars are still there. – Di Zou Jun 05 '12 at 21:21
Have you looked in the javascript console for your browser? Any errors? – Hraefn Jun 06 '12 at 01:04
@Hraefin- I get this error: Uncaught TypeError: Cannot set property 'height' of null – Di Zou Jun 06 '12 at 18:45
@Hraefin- So I've resolved all the errors I was getting. I had to change the JS a little. However, nothing gets resized still. – Di Zou Jun 06 '12 at 18:54
@Matthew Keefe So this is the error I have right now: Uncaught TypeError: Cannot read property 'body' of undefined – Di Zou Jun 06 '12 at 20:57

score 0 · Accepted Answer · answered Jul 09 '12 at 18:11

This is what I ended up doing:

<script language="JavaScript">
    function resizeIframe(newHeight, id){    
        document.getElementById(id).style.height = parseInt(newHeight,10) + 'px';
}
</script>
<iframe id="iframe2" src="/apex/NewsPage?id=a1TW0000000EJAL" frameborder="0"  ="" onload="parent.resizeIframe(1.5*document.body.clientHeight,'iframe2');"  height="100%" width="100%"></iframe>

How do I get my Customer Portal to auto-adjust its component's size?

2 Answers2