+ Start a Discussion

Possible solution for inability to dynamically resize inline VF pages?



I am currently struggling with this problem right now.  I have a VF page on cases as an inline page.  The VF page itself does not apply to EVERY case that will use that page layout, so it is set to not display anything if the case does not meet requirements, meaning a lot of the time there is a 450 pixel blank spot in the middle of the case.


I have two ideas on how I might avoid this, but no idea how to go about them or if they are possible.


My first idea is to make the 'section' on the case DETAIL page the the VF page is in (it is the only thing in it) automatically collapse unless the case meets the same requirements that the VF has to display anything.  Is that possible using some sort of JAVA?


My second idea is a little trickier.  The VF page basically allows the user to perform some actions, right there in the page, quickly.  The VF page's default 'static' size is much smaller (around 150 pixels) than the potential size when performing the actions (which could be 1000+).   The stuff being displayed in the VF page is controlled using buttons.  My question is this:  Rather then having the buttons cause the VF page itself to expand and shrink as different things are being displayed, if it is possible to instead cause a window like the 'hover details' you get when hovering over an account name on a case pop up instead?  The user would need to be able to enter in details in that hover window and click buttons, but it would allow for the 'hover window' to resize accordingly and not require users to scroll in the inline VF page as well as reduce the size of the VF inline element itself, as the element would just need to be the 'static' size of the VF page.


Does that make sense?  Do I need to provide a mocked up screenshot of what I am trying to achieve?


Please let me know ANY ideas you have.


Jeremy Stender




Hi Stebder,


I can see a "fancyBox" used here. Whenever the user clicks a button within the inline VFPage have a secon, third, fourth, ... VFPage for the other functions which will open in a "fancybox". You can find how to use this here . Simply select iFrame as the content type.


Hope this helps!


Eli Flores, SFDC DevEli Flores, SFDC Dev
If you are lucky enough to still have s-controls, you can add an html S-control that resizes the div (or iframe i forget) that contains the visualforce page... Here's one i made that calls a method of one of my controllers to set how high it should be

<script src="/soap/ajax/15.0/connection.js" type="text/javascript"></script>
<script src="/soap/ajax/15.0/apex.js" type="text/javascript"></script>
<script type="text/javascript">

var id = sforce.apex.execute("OppContactRoleSynchCon","reviewOppForNumberOfMessage",{oppID:'{!Opportunity.Id}'});
if (id > 0 ) {
top.document.getElementById("066800000002EMu").style.height = (42 * id)+"px";


066800000002EMu is the id of the visualforce page which SFDC helpfully created id on the div or iframe as. You can get the id by clicking on the visualforce page name  in Developer -> Pages and looking at the ID.

Hope this helps.

I feel compelled to mention that this is a total hack and can be undone if SFDC ever decides to ID the div or iframe differently.
Eli Flores, SFDC DevEli Flores, SFDC Dev
Forgot to mention  after you make the s-control, you have to drag it onto the  same page layouts that have the inline vf page