2

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:-

**COMPONENT**
table.heatmapWrapper{
    border-collapse: collapse;
    width: 500px;
    height: 500px;
    table-layout: auto;
    text-align:c

    <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;"-->

**VF PAGE**
<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"/>
        </apex:outputPanel>

2 Answers 2

1

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')}"/>
1
  • 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, 2015 at 11:33
1

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. `

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .