Apex Code Development You need to sign in to do that
Don't have an account?
Uttpal chandra CSS not working when convert to Pdf
Hi All,
When i try to convert the below page into Pdf using renderAs="Pdf" its CSS not working correctly and table got disturbed.
<apex:page applyHtmlTag="false" showHeader="false" applyBodyTag="false">
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Generating HTML DEMO</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,700" rel="stylesheet" />
<style type="text/css">
h1, h2, h3, h4, h5, h6{
margin: 0;
}
body{
font-family: 'Fira Sans Condensed', sans-serif;
font-size: 1rem;
color: #3a3a3a;
font-weight: 400;
}
</style>
</head>
<body style="padding: 0; margin: 0; font-family: 'Fira Sans Condensed', sans-serif;">
<!-- Main Table -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center">
<!-- Main Table -->
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<!-- Start Header Heading ( Section 1)-->
<tr>
<td align="center" width="100%">
<table width="100%">
<tr>
<td align="center">
<h2>Main Heading top level </h2>
</td>
</tr>
<tr>
<td align="center">
<h5>(This line contain some data and it is below the main heading and top of the table and displaying some data...... New data and not showing)</h5>
</td>
</tr>
</table>
</td>
</tr>
<!-- End Header Heading (Section 1)-->
<tr>
<td>
<table border="1" style="border-collapse: collapse;" cellpadding="0" cellspacing="0" align="center" width="100%">
<!-- Start Left Side -->
<td width="40%" valign="top">
<table>
<tr>
<td>
<table class="table" cellpadding="0" cellspacing="15" style="border-bottom: 1px solid;">
<tr>
<td>
<h2>Line 1</h2>
</td>
</tr>
<tr>
<td>Line 2</td>
</tr>
<tr>
<td>Line 3</td>
</tr>
<tr>
<td>Line 4</td>
</tr>
<tr>
<td>Line 5</td>
</tr>
<tr>
<td>Line 6</td>
</tr>
<tr>
<td>Line 7</td>
</tr>
<tr>
<td>Line 8</td>
</tr>
<tr>
<td>Line 1324567981021354564654654654646546</td>
</tr>
</table>
</td>
</tr>
<!-- Left Bottom Information -->
<tr>
<td>
<table class="table" cellpadding="0" cellspacing="15">
<tr>
<td>
<h2>Line 1</h2>
</td>
</tr>
<tr>
<td>
Line 1
</td>
</tr>
<tr>
<td>
Line 1
</td>
</tr>
<tr>
<td>
Line 1
</td>
</tr>
<tr>
<td>
Line 1
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="60%" valign="top">
<table class="table" width="100%">
<tr>
<td>
<table width="100%" style="border-bottom: 1px solid #000;">
<tr>
<td width="50%">
<table cellpadding="2" cellspacing="0">
<tr>
<td>Data 1</td>
</tr>
<tr>
<td><strong>Answer 1</strong></td>
</tr>
</table>
</td>
<td width="50%">
<table>
<tr>
<td>Data</td>
</tr>
<tr>
<td><strong>Answer </strong></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- End Column 1 -->
<!-- Start Column 2 -->
<tr>
<td>
<table width="100%" style="border-bottom: 1px solid #000;">
<tr>
<td width="50%">
<table cellpadding="2" cellspacing="0">
<tr>
<td>Data</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td width="50%">
<table>
<tr>
<td>Data</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- End Column 2 -->
<!-- Start Column 3 -->
<tr>
<td>
<table width="100%" style="border-bottom: 1px solid #000;">
<tr>
<td width="50%">
<table cellpadding="2" cellspacing="0">
<tr>
<td>Data</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td width="50%">
<table>
<tr>
<td>Data</td>
</tr>
<tr>
<td><strong>Answer </strong></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- End Column 3 -->
<!-- Start Column 4 -->
<tr>
<td>
<table width="100%" style="border-bottom: 1px solid #000;">
<tr>
<td width="50%">
<table cellpadding="2" cellspacing="0">
<tr>
<td>Data</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td width="50%">
<table>
<tr>
<td>Data</td>
</tr>
<tr>
<td><strong>Answer </strong></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- End Column 4 -->
<!-- Start Column 5 -->
<tr>
<td>
<table width="100%" style="border-bottom: 1px solid #000;">
<tr>
<td width="50%">
<table cellpadding="2" cellspacing="0">
<tr>
<td>Data.</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td width="50%">
<table>
<tr>
<td>Data</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- End Column 5 -->
<!-- Start Column 6 -->
<tr>
<td>
<table width="100%" style="border-bottom: 1px solid #000;">
<tr>
<td width="50%">
<table cellpadding="2" cellspacing="0">
<tr>
<td>Data</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td width="50%">
<table>
<tr>
<td>Data</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- End Column 6 -->
<!-- Start Column 7 -->
<tr>
<td>
<table width="100%" style="border-bottom: 1px solid #000;">
<tr>
<td width="50%">
<table cellpadding="2" cellspacing="0">
<tr>
<td>Data: <strong>Answer </strong></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- End Column 7 -->
<!-- Start Column 7 -->
<tr>
<td>
<table width="100%">
<tr>
<td width="50%">
<table cellpadding="2" cellspacing="0">
<tr>
<td>Data</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- End Column 7 -->
</table>
</td>
<!-- End Right Side -->
</table>
</td>
</tr>
<!-- Company Info Row Start (Section 2) -->
<tr>
<td height="30"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End Main Table -->
</body>
</html>
</apex:page>
Anyone why it is not working?
Try the below code it Works fine.
You have to just set false to standardStylesheets.
<apex:page applyHtmlTag="false" standardStylesheets="false" showHeader="false" applyBodyTag="false" renderAs="pdf">
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi