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
ncurhamncurham 

VF component in Page Layout - how do I avoid a white background?

I've added a VF page component to the top of a page layout using the "issue" severity format.  Works fine but there is an annoying white line that appears at the top of the page section.  What do I need to to remove this/set it to the background colour?

 

The VF page is as follows:

 

<apex:page standardController="xxx__c" tabStyle="Terms_of_Business__c">

<div id="training_message" style="height:80px; background:#F3F3EC;" >

<apex:pageMessage severity="info">

Click <apex:outputLink target="_blank" value="xxx" id="record1">here</font></apex:outputLink> for a demonstration of adding a Terms of Business record<br>

Click <apex:outputLink target="_blank" value="xxx" id="record2">here</font></apex:outputLink> for a demonstration of submitting and approving a Terms of Business record<br>

Click <apex:outputLink target="_blank" value="xxx" id="record3">here</font></apex:outputLink> for a demonstration of sending emails for a Terms of Business record</apex:pagemessage>

</div>

</apex:page>
 

The page section is set to 80px.

 

The white line looks like:

 

 

 

 

 

Any suggestions would be much appreciated.

David VPDavid VP

Use firebug for inspecting the DOM model / element and style that is generating that white line.

 

Once you have that, you will probably be able to fix it with some CSS in your page header.

 

 

-david-

ncurhamncurham

David,

 

Thanks for the Firebug pointer - I'm a newbie to CSS but made some sense of the DOM.  It looks like it is the iframe for the page section that is housing the VF page component.  Is it possible to intercept and modify the settings for the iframe?  Maybe a CSS setting that sets the background for the whole page not just the DIV?

 

Again, all help is very much appreciated.

 

Regards,

 

Neil

SharadSharad

There is one more problem that I am facing with VF page embedded in page layout. The contents of my VF page are conditional and may vary in height and including VF page in page layout does not support variable hight. The height is fixed in pixel in page layout for that VF component.

 

Now, when I have less content in my page, rest of space appears blank with white background. Is there any solution to make the VF component height dynamic?

 

Thanks !

apexscromieapexscromie

Hi there,

 

I was annoyed by that whitespace too.  I tried out a function I found out there (sorry to the author - I've forgotten where I found it) and it seemed to work well.  Try something like this:

 

<apex:page cache="true" standardController="Lead" extensions="bluewarningController" showHeader="false" pageStyle="Lead">

<script>

function resizeFrame() {

var sframe = parent.document.getElementById("theElement"); //You'll need to use $Component to get the right one.

if ({!ShowWarning} == "false")

{

sframe.style.height = "0px";

} else {

sframe.style.height = document.body.scrollHeight - 10 + "px";

}

}

</script>

<body onLoad="resizeFrame()">

<apex:pageBlock id="myPage" tabStyle="Lead" rendered="{!ShowWarning}">

<font color="blue">{!WarningString}</font>

</apex:pageBlock>

<apex:pageBlock tabStyle="Lead" rendered="{!NotShowWarning}">

<br><br><br>

 </apex:pageBlock>

</body>

</apex:page>

 

Give something like this a try and see if it works for you.

 

Good luck!

apexscromieapexscromie

OK - now to put it in code format:

 

<apex:page cache="true" standardController="Lead" extensions="bluewarningController" showHeader="false" pageStyle="Lead"> <script> function resizeFrame() { var sframe = parent.document.getElementById("066S00000004E5A"); if ({!ShowWarning} == "false") { sframe.style.height = "0px"; } else { sframe.style.height = document.body.scrollHeight - 10 + "px"; } } </script> <body onLoad="resizeFrame()"> <apex:pageBlock id="myPage" tabStyle="Lead" rendered="{!ShowWarning}"> <font color="blue">{!WarningString}</font> </apex:pageBlock> <apex:pageBlock tabStyle="Lead" rendered="{!NotShowWarning}"> <br><br><br> </apex:pageBlock> </body> </apex:page>

 

Sorry about the formatting in the previous post...