function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Roshan TamrakarRoshan Tamrakar 

White space below VF Page when placed inside a section

HI All,

I have created a VF Page and added that inside Account Detail page under a separete section.

The properties of the section are:
Name: Contact List
Column: 1
Tab Order: Top-Down
Show Section Heading On Detail Page: checked
Show Section Heading On Edit Page: checked

The properties of VF Page placed inside the section are:
Width: 100%
Height: 200px
Show Scrollbars: checked
Show label: unchecked

The output is as below:

The VF Page source code:
<apex:page standardController="Account">
<apex:pageBlock >
  <apex:pageBlockSection >  
  <apex:pageBlockTable value="{!Account.Contacts}" var="cnt">
    <apex:column value="{!cnt.Name}"/>

My problem is:
I don't want the white space below the page that is being displayed in above picture. If the list is too short the white space will be more. I want the page to cover the whole section.
What tag, attributes or settings help me to avoid the white section and cover the whole section.
Please help.


So you want it to appear like a relatedList instead of in the detail component?

Then you will have to write the page in Visualforce.  Inline pages in the page layout editor only allow you to add them as a new section within the detail section, rather than appending it to the end of the page.

You can override the account detail page with your own page, and use apex :detail to get the  normal detail functionality.
London BenLondon Ben

This is easy with a tiny bit of javascript...

The actual function:

//resizes the frame holding the sControl to make up for odd dimensions
function resizeFrame() {
var sframe = parent.document.getElementById("itarget"); //get id of iframe from parent
if (navigator.userAgent.indexOf("Firefox") != -1) { //if Firefox
var nHeight = document.body.scrollHeight+10; //add ten pixels to height of sControl frame
} else { //otherwise
var nHeight = document.body.scrollHeight; //use the returned height of sControl frame
} = nHeight+"px"; //set the frame height to correspond to the content

The trigger for the function:

resizeFrame(); //calls function from above

Roshan TamrakarRoshan Tamrakar
Thanks Ben,

But you are referring my page as s-control but the highlighted part in the pic is a VisualForce page. I am new in salesforce, so I don't know how to add your suggested code in my page. Could you please show me how to do so by modifying my submitted code? I will be very grateful.


could you tell me if you found a way to resolve this problem please? do you mind shraing your code please?

i am facing the same issue. thank you very much!!!


Hi, I also want to control the height of the table in a VF page in the page layout.... part of it was not visible so users have to click on it and scroll down, there is no scroll bar....

and I cannot set the property of the VF page section: (I make the change and save but next time I check the property there is nothing there).

[The properties of VF Page placed inside the section are:
Width: 100%
Height: 200px
Show Scrollbars: checked
Show label: unchecked]

Jen RomanoJen Romano

The amount of whitespace also changes with the resolution of each computer. Is there a way to say 100% height like you can for width? This is an ongoing problem for us as well.

Amit Kumar RaikwarAmit Kumar Raikwar

You can set the height for visual force properties in page layout.
User-added image