function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
prageethprageeth 

OutputPanels are not rendered as expected

The following code works fine when the API version of the page is set to 17. The output pdf page is rendered with two outputPanels which touch each other and everything is ok.
But it doesn't work correctly if I change the API version to 18. Now it shows a gap between two outputPanels.
And if I removed the line "<apex:outputField value="{!Opportunity.name}"/>", the code doesn't work both
under version 17 and 18.
Can anybody help me to fix this problem.
 
<apex:page renderAs="pdf" standardController="Opportunity">  
	<apex:outputPanel style="border:solid 1px red;height:200px; position:fixed; width:100%;">  
	</apex:outputPanel>  
	<apex:outputPanel layout="block" style="border:solid 1px green;position:relative; top:200px; height:200px">
	</apex:outputPanel>  
	<apex:outputField value="{!Opportunity.name}"/>
</apex:page>
 
 


XactiumBenXactiumBen
If you render it as normal html am I correct in assuming that it works properly?  The PDF renderer in salesforce always seems to require a trial and error approach before everything shows up perfectly.
 
A few things:
 
1. If you render the page as normal html what are the differences in the source code between the two api versions?
2. What happens if you change the outputPanels to 'position: absolute;' (and possibly adding 'top: 0;' to the top OP style)?
3. Does it help if both outputPanels have a layout of block, or if both outputPanels don't have this attribute on them?
 
I haven't yet attempted to try this out for myself but if none of these suggestions work for you I might have a quick look :smileywink:


prageethprageeth
Hello 
	First of all I thank you for the quick response.
 
1. Actually there is no difference between the source codes of the pages generated using two api versions. Not only the 	source codes but HTML outputs are also looks similar.
3. I changed the "layout" attributes of both outputPanels, but id didn't affect the output.
 
 
2. I changed the outputPanels to 'position: absolute;'. Then there were some positive change. It means the two outputPanels were left aligned correctly. But those were overlapped. However since I am creating a multi-page report, it is very important for me to keep the positions of two output panels unchanged(ie: first one 'Fixed' and the second one 'relative').
 
    I added a page margin to my page as below to make my problem more clear. Now you will see there is a gap between the first outputPanel and the top page margin. That gap is not there if the API version is set to 17. That gap is the reason which causes to overlap the two outputPanels when position is set to 'absolute' as you suggested. When I create multiple pages, I can see that, this gap appears only in the first page. If you have any idea, please share it with me. 
 
 
<apex:page renderAs="pdf" standardController="Opportunity">
<head>
<style>
    @page{
        @top-left{
            background-color:yellow;
        }
    }
</style>
</head>
    <apex:outputPanel layout="block" style="border:solid 1px red;height:200px; position:fixed; width:100%;">
    </apex:outputPanel>
    <apex:outputPanel layout="block" style="border:solid 1px green; position:relative; top:200px;height:200px;width:100%;">
    </apex:outputPanel>
    <apex:outputField value="{!Opportunity.name}"/>
</apex:page> 
  
Thank you.!!
 
 
 
 
 
 
 


XactiumBenXactiumBen
This problem seems very familiar to me now you have given some extra details.  I have recently created some PDF documents and for some reason I would have to set the styles for an image to be 'top: -0.21cm; left: -0.74cm;' with 'position: absolute;'.  This seemed fine to get the element showing in the top left but after adding further pages to this PDF I realised that the image on the second pages weren't aligned properly.  To fix this I had to add an offset of a few pixels to every page except for the first one.  You may have stumbled upon an issue with the new API version here.
 
I'm a little unclear why you need the first outputPanel to be 'position: fixed' but the way I see to overcome this issue is to use this code below (Changed both panels to be 'position: absolute;' and added a top/left offset to overcome the extra margin. You might need to tweak these values to get the desired results):
 
 
<apex:outputPanel layout="block" style="border:solid 1px red;height:200px; position:absolute; top: -0.21cm; left: -0.74cm; width:100%;">

</apex:outputPanel>

<apex:outputPanel layout="block" style="border:solid 1px green; position:absolute; top:200px;height:200px;width:100%;">

</apex:outputPanel>

<apex:outputField value="{!Opportunity.name}"/>
 


prageethprageeth
Hello 
	Although your post didn't completely solved my problem it gave me some valuable points. I used a negative value as the "left" value and then I could make the bands left aligned properly. But I couldn't make the "top" value of first outputPanel a negative value, since it gave me an "Internal Server Error". Even when I just copy and paste your code as below it gave the "Internal Server Error". 
<apex:page renderAs="pdf" standardController="Opportunity">
    <apex:outputPanel layout="block" style="border:solid 1px red;height:200px; position:absolute; top: -0.21cm; left: -0.74cm; width:100%;">
    </apex:outputPanel>
 
    <apex:outputPanel layout="block" style="border:solid 1px green; position:absolute; top:200px;height:200px;width:100%;">
    </apex:outputPanel>
 
    <apex:outputField value="{!Opportunity.name}"/>
</apex:page> 
 
 However thank you very much for pointing me to a correct direction. I fixed the left aligning error, and now I am looking for a way to make the "top" a negative value. If you get a solution please share it with me.
Thank you.