+ Start a Discussion
pierpipierpi 

Problem keeping CSS style when rendering as PDF and using a component

Hi, 

I have a page defining several styles and containing several components.  If my component contains html segments part of a style defined in the main page I have problems when rendering the page as pdf.  The non-pdf page renders properly with no problems.  I tried looking around the posts and the documentation with no success. 

 

If I include the custom component MyComponent the rendered pdf loses the style.  If I inline the component it works fine.

 

Below is a simplified version of what I developed.

 

Page:

 

 

<apex:page renderAs="pdf"  standardstylesheets="false" sidebar="false" showheader="false" >

 

<head> <style type="text/css">

 

body,td {

    font-family: Arial;

    font-size: 11px;

}

.table_blue {

    border-collapse: collapse;

}

 

.table_blue .head td {

    border: 1px solid #000000;

    padding: 5px 3px;

    vertical-align: top;

    background-color: #A4A4A4;

    font-weight: bold;

}

</style>

</head>

<body>

<table cellpadding="0" cellspacing="0" width="100%" class="table_blue">

       <c:LineItemHeaderComponent />

<!--tr class="head">

    <td align="center" nowrap="nowrap">"Column 1" </td>

    <td align="center" nowrap="nowrap">"Column 2" </td>

</tr>-->

</table>

</body>

</apex:page>

 

 

 

 

 My component:

 

 

<apex:component >

<tr class="head">

    <td align="center" nowrap="nowrap">"Column 1" </td>

    <td align="center" nowrap="nowrap">"Column 2" </td>

</tr>

</apex:component>

 

Thanks a lot 

 

 


 

prageethprageeth

Hi pierpi;

  I think im too late to reply for your question since you may have already solved it. But I think this would be helpful for someone in the future.

 

Normally salesforce components are rendered as spans(<span></span>). So your component is rendered as follows.

  

<span id="j_id0:j_id2"> 

  <tr class="head"> 

    <td align="center" nowrap="nowrap">"Column 1" </td> 

    <td align="center" nowrap="nowrap">"Column 2" </td> 

  </tr>

</span> 

 

The <span> tags are automatically added when the component is rendered. (Try to render your VisualForce page in HTML format and view the source.)

 

The above is the reason for the style loss.

If you used

      .head td {

           //styles here

      

 

  instead of

      .table_blue .head td {

          //styles here

       

 

 it will work.

 

 

 

 

 

Purnima JothikrishnanPurnima Jothikrishnan
I know its too late to reply now. But it will be helpful for someone who is looking for a solution. 
Please add  layout="none" to your apex component , like this

<apex:component controller="test" layout="none">

This will generate the component without html tags - this the style tags will be visible and applied on the content.
Canaan TechCanaan Tech
@Purnima Can you give an example.