I'm trying to display my HTML table in the center of the page when rendering it as pdf. When I render as HTML it works as expected so I assume that CSS properties for alignment doesn't work properly in pdf. Any help on this is appreciated!

My VF Component is embedded in a VF page as below:-

    border-collapse: collapse;
    width: 500px;
    height: 500px;
    table-layout: auto;

    <apex:form >
            <apex:outputPanel layout="none">
            <div style="text-align:center; width:100%;" >
            <table class="heatmapWrapper" text-align="center"> <!--style="/*width:{!width}; height:{!height};*/margin: 0 auto !important;"-->

<apex:outputPanel layout="none" rendered="{!showAggregatedHeatMap}">
           <!--  <div style="page-break-after:always;"></div> -->
            <c:DrawHeatmap heatmap="{!heatmap}" safeMode="true" height="500px" width="100%" disableRiskList="true" showRiskIds="true"/>

The PDF render engine doesn't like inline styles and if you are using css styles, you need create a static resource with the .css and in the visualforce load de css

<apex:stylesheet value="{!URLFOR($Resource.MYStyless, 'vfStyles.css')}"/>
  • i'm already doing that! actually that style class is from my static resource and I use the stylesheet value as specified :( Can't understand what's blocking
    – Tinkerbell
    Jun 30 '15 at 11:33

You have several issues going on with your code. The first thing I immediately see is that you're using the <apex:form> tag which is on the list of Components That Are Unsafe to Use When Rendering as PDF. See Component Behavior When Rendered as PDF in the VF Developer's Guide for a complete list of "Safe", "Use with Caution" and "Unsafe" Visualforce components.

You've not included all of the code for your entire page, so I can't say all of what else might be going on. But, I don't see an align:center in the table.heatmapWrapper CSS. The only align:center callouts I see are all related to text. I can also say that the Render Engine doesn't support any CSS 3, instead only CSS 2.1. `

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.