Apex Code Development You need to sign in to do that
Don't have an account?
pierpi 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
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.
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.