"> Is it possible to add css for designing the pdf using TCPDF action? - Forums

Forums

Please write a review for the extension you are using on the Joomla extensions directory before posting a new question as we are being spammed by many negative reviews.

Thank you for your support!

Is it possible to add css for designing the pdf using TCPDF action?

ke
kevinkarl 12 Aug, 2015
Hi,

is it possible to add css in the Contents Box in the TCPDF component?

I already tried it but no luck. the form successfully generated a pdf attached in the email but the problem is that PDF output is plain text only. no design such as. borders, color, bolded text and more css.

Here is my code in the Content Box: 

<?php
$output = "
<style type='text/css'>
	.data-main-container {
		width: 8.5in;
		font-family: Arial;
	}
	
	.table-container {
		margin-top: 10px;
		border: double 3px black;
	}
	
	table {
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
	}
	
	.data-caption {
		border-right: double;
		height: 250px;
		width: 5%;
		padding: 0 0 35px 0;
	}
	
	.data-caption>span {
		display: block;
		-webkit-transform: rotate(270deg);   
		-moz-transform: rotate(270deg);
		-ms-transform: rotate(270deg);
		-o-transform: rotate(270deg);
		transform: rotate(270deg);
		font-weight: bold;
		margin: -6px;
	}
	
	.data-fields {
		width: 100%;
	}
	
	.data-fields>td {
		vertical-align: bottom;
		padding-left: 5px;
	}
	
	.desc {
		vertical-align: top !important;
		padding-top: 5px;
	}
	
	.bordered {
		border-bottom: solid 2px black;
	}
	
	.label {
		font-weight: bold;
		text-align: center;
	}
	
	.desc2 {
		font-style: italic;
		font-size: 14px;
		padding-left: 5px;
	}
</style>

<div class='data-main-container'>
<div class='table-container'>
	<table width='100%'>
		<colgroup>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
		</colgroup>
		<tr>
			<td class='data-caption' rowspan='10' colspan='4'>
				<span>A</span>
				<span>T</span>
				<span>A</span>
				<span>D</span>
				<span> </span>
				<span>L</span>
				<span>A</span>
				<span>N</span>
				<span>O</span>
				<span>S</span>
				<span>R</span>
				<span>E</span>
				<span>P</span>
				<span> </span>
				<span>A.</span>
			</td>
		</tr>
		<tr><td colspan='100'> </td></tr>
		<tr class='data-fields'>
			<td colspan='7'>Name: </td>
			<td class='bordered' colspan='22'></td>
			<td class='bordered' colspan='22'></td>
			<td class='bordered' colspan='22'></td>
			<td class='bordered' colspan='23'></td>
		</tr>
		<tr class='data-fields'>
			<td class='desc' colspan='7'> </td>
			<td class='desc' colspan='22'>Last Name</td>
			<td class='desc' colspan='22'>Given Name</td>
			<td class='desc' colspan='22'>Middle Name</td>
			<td class='desc' colspan='23'>Nickname</td>
		</tr>
		<tr class='data-fields'>
			<td colspan='13'>City Address: </td>
			<td class='bordered' colspan='87'></td>
		</tr>
		<tr class='data-fields'>
			<td colspan='19'>Provincial Address: </td>
			<td class='bordered' colspan='81'></td>
		</tr>
		<tr class='data-fields'>
			<td colspan='14'>Date of Birth: </td>
			<td class='bordered' colspan='24'></td>
			<td colspan='14'>Place of Birth: </td>
			<td class='bordered' colspan='24'></td>
			<td colspan='6'>Age: </td>
			<td class='bordered' colspan='18'></td>
		</tr>
		<tr class='data-fields'>
			<td colspan='13'>Civil Status: </td>
			<td class='bordered' colspan='25'></td>
			<td colspan='12'>Citizenship: </td>
			<td class='bordered' colspan='18'></td>
			<td colspan='10'>Religion: </td>
			<td class='bordered' colspan='22'></td>
		</tr>
		<tr class='data-fields'>
			<td colspan='7'>SSS: </td>
			<td class='bordered' colspan='31'></td>
			<td colspan='6'>TIN: </td>
			<td class='bordered' colspan='24'></td>
			<td colspan='15'>Contact No./s: </td>
			<td class='bordered' colspan='23'></td>
		</tr>
		<tr><td colspan='100'> </td></tr>
	</table>
</div>
<div class='table-container'>
	<table width='100%'>
		<colgroup>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
			<col width='1%'><col width='1%'>
		</colgroup>
		<tr>
			<td class='data-caption' rowspan='12' colspan='4'>
				<span>D</span>
				<span>N</span>
				<span>U</span>
				<span>O</span>
				<span>R</span>
				<span>G</span>
				<span>K</span>
				<span>C</span>
				<span>A</span>
				<span>B</span>
				<span> </span>
				<span>L</span>
				<span>A</span>
				<span>N</span>
				<span>O</span>
				<span>I</span>
				<span>T</span>
				<span>A</span>
				<span>C</span>
				<span>U</span>
				<span>D</span>
				<span>E</span>
				<span> </span>
				<span>B.</span>
			</td>
		</tr>
		<tr><td colspan='100'> </td></tr>
		<tr class='data-fields'>
			<td class='label' colspan='20'>LEVEL</td>
			<td class='label' colspan='21'>SCHOOL</td>
			<td colspan='1'> </td>
			<td class='label' colspan='19'>DEGREE OBTAINED</td>
			<td colspan='1'> </td>
			<td class='label' colspan='17'>YEAR GRADUATED</td>
			<td colspan='1'> </td>
			<td class='label' colspan='20'>HONORS RECEIVED</td>
		</tr>
		<tr><td colspan='100'> </td></tr>
		<tr class='data-fields'>
			<td colspan='20'>Secondary</td>
			<td class='bordered' colspan='21'></td>
			<td colspan='1'> </td>
			<td class='bordered' colspan='19'></td>
			<td colspan='1'> </td>
			<td class='bordered' colspan='17'></td>
			<td colspan='1'> </td>
			<td class='bordered' colspan='20'></td>
		</tr>
		<tr><td colspan='100'> </td></tr>
		<tr class='data-fields'>
			<td colspan='20'>Tertiary</td>
			<td class='bordered' colspan='21'></td>
			<td colspan='1'> </td>
			<td class='bordered' colspan='19'></td>
			<td colspan='1'> </td>
			<td class='bordered' colspan='17'></td>
			<td colspan='1'> </td>
			<td class='bordered' colspan='20'></td>
		</tr>
		<tr><td colspan='100'> </td></tr>
		<tr class='data-fields'>
			<td colspan='20'>Post Graduate Studies</td>
			<td class='bordered' colspan='21'></td>
			<td colspan='1'> </td>
			<td class='bordered' colspan='19'></td>
			<td colspan='1'> </td>
			<td class='bordered' colspan='17'></td>
			<td colspan='1'> </td>
			<td class='bordered' colspan='20'></td>
		</tr>
		<tr><td colspan='100'> </td></tr>
		<tr><td class='desc2' colspan='100'>(if not graduated, place number of units earned under 'date graduated')</td></tr>
		<tr><td colspan='100'> </td></tr>
	</table>
</div>
</div>";

echo $output;
?>
Gr
GreyHead 12 Aug, 2015
Hi kevinkarl,

I don't know the answer to this without experimenting. I do know that ChronoForms has only a partial implementation of TCPDF, and TCPDF itself has some limitation.

I suspect it might work if you add the CSS in-line instead of including the <script></script> block.

Bob
This topic is locked and no more replies can be posted.