Problem with <page> tag and css - Page 1

1

Le 09/06/2010 à 12:54

Hi,

I have implemented HTML2PDF for converting html to pdf. It is working fine, except for two problem.
1) Include of class in html: class not work in html. Although HTML display ok on browser but when converting it to PDF, class does not take effect.
Suppost i have <table> in html. If i add <table class="w100pr"> (w100pr contain width:100%; in css), it will work fine when display directly to browser, but when try to convert it to pdf, class does not take effect.

2) <page> tag generate extra blanks page:
I have included <page> tag after <body> tag in html. But i don't know why one blank page generated and this blank page is always first one.
If i add <page> tag before <body> tag then i am not able to produce header using <page_header> tag.

Please help me................................

2

Le 09/06/2010 à 20:19

for 1), you must specify the width of all the elements like TD, TH, DIV, TABLE, because HTML2PDF can't be intelligent, and can't determine the width of each element.

for 2), it is because you have not to use body, head, or html tags with the page tag. if you use the page tag, you must not use the others tag, that are not for making PDF, but only for display in a browser.

Ancien pseudo : lolo

3

Le 10/06/2010 à 08:18

for 1) You means that we cannot specify class in HTML for PDF?

for 2) Can you please corrrect my HTML for PDF or give me some hints in it. My HTML is:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Section 504 Eligibility Determination Summary</title>
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<link rel="stylesheet" type="text/css" href="/css/autocomplete.css" />
<link rel="stylesheet" type="text/css" href="/css/forms.css" />
<link rel="stylesheet" type="text/css" href="/css/forms_colorize.css" />
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/dhtmlx/dhtmlxCalendar/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="/js/dhtmlx/dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
<link rel="stylesheet" type="text/css" href="/js/dhtmlx/dhtmlxCalendar/codebase/dhtmlxcalendar.css" />

<style type="text/css">
.bold {font-weight: bold;
}
.fs16 { font-size: 16px;
}
.italic { font-style: italic;
}
.w300 {width:300px;
}
.w100pr {width:100%;
}
.w50pr {width:50%;
}
.mb10 {margin-bottom:10px
}
.nowrap {white-space:nowrap;
}

table.dtable {
border-collapse: collapse;
}
.dtable th,
.dtable td {
padding-left: 0;
padding-right: 0;
}

.data_table {
border:1px solid #525252;
}
.data_table td {
border:1px solid #525252;
padding-left: 5px;
padding-right: 5px;
}

.td_odd
{
width: 5%;
background: #DCDCDC;
}

.subtable{
border:0;
}
.subtable td{
border:0;
}

.pad {
width:10px;
}
.mp0 {
margin:0;
padding:0;
}
</style>
<script>
var calendarsList = ['date'];
var cal;
dhtmlxEvent (window,"load", function () {
cal = new dhtmlxCalendarObject(calendarsList, true, {isYearEditable: true,isMonthEditable: true, isWinHeader: true, headerButtons: "X", headerText: ""});
cal.setDateFormat(appDateFormat);

parent.$k(document.getElementById ('school')).addEventHandler("click", function(){parent.schoolEditHandler(document.getElementById ('school'))});
parent.$k(document.getElementById ('school')).addEventHandler("keydown", function(){parent.schoolEditHandler(document.getElementById ('school'))});
});
</script>
</head>
<body class="form">

<form id="formContainer">
<div class="formWrap">
<page_header>
<br />
<br />
<div class="title center fs16">
<page_header_text>Section 504 Eligibility Determination Summary</page_header_text>
</div>
<br />
<br />
</page_header>
<table width="100%" class="w100pr dtable">
<tr>
<td style="width:5%;">Student:</td>
<td style="width:60%;"><input class="w100pr" name="child_name" id="child_name" value="<?php echo $child_name;?>" /></td>
<td style="width:5%;" class="center">Grade:</td>
<td style="width:30%;"><input class="w100pr" name="grade" id="grade" value="<?php echo $grade;?>" /></td>
</tr>
<tr>
<td>School:</td>
<td><input class="w100pr" name="school" id="school" value="<?php echo $school;?>" /></td>
<td class="center">Date:</td>
<td><input class="w100pr" name="date" id="date" value="<?php echo $date;?>" /></td>
</tr>
</table>

<br />
<div>
The Section 504 Team reviewed and considered the following data including the following sources, including referral document: <span class="bold">Check all that apply:</span>
</div>

<table width="100%" class="data_table dtable">
<tr>
<td class="td_odd"><input type="checkbox" name="grade_reports" id="grade_reports" /></td>
<td style="width:45%;"><label class="mp0" for="grade_reports">Grade Reports</label></td>
<td class="td_odd"><input type="checkbox" name="teacher_administrator_input" id="teacher_administrator_input" /></td>
<td><label class="mp0" for="teacher_administrator_input">Teacher/Administrator input</label></td>
</tr>
<tr>
<td class="td_odd"><input type="checkbox" name="disciplinary_records" id="disciplinary_records" /></td>
<td><label class="mp0" for="disciplinary_records">Disciplinary records</label></td>
<td class="td_odd"><input type="checkbox" name="student_work_portfolio" id="student_work_portfolio" /></td>
<td><label class="mp0" for="student_work_portfolio">Student work portfolio</label></td>
</tr>
<tr>
<td class="td_odd"><input type="checkbox" name="standardized_tests" id="standardized_tests" checked="<?php if($standardized_tests=='on') echo "checked"; ?>" /></td>
<td><label class="mp0" for="standardized_tests">Standardized tests</label></td>
<td class="td_odd"><input type="checkbox" name="school_health_information" id="school_health_information" /></td>
<td><label class="mp0" for="school_health_information">School health information</label></td>
</tr>
<tr>
<td class="td_odd"><input type="checkbox" name="medical_evaluation_diagnosis" id="medical_evaluation_diagnosis" /></td>
<td><label class="mp0" for="medical_evaluation_diagnosis">Medical Evaluation/diagnosis</label></td>
<td class="td_odd"><input type="checkbox" name="parent_input" id="parent_input" /></td>
<td><label class="mp0" for="parent_input">Parent input</label></td>
</tr>
<tr>
<td class="td_odd"><input type="checkbox" name="checkbox_other1" id="checkbox_other1" checked="<?php if($checkbox_other1=='on') echo "checked"; ?>" /></td>
<td>Other:<input onBlur="if (this.value.length > 0) is_checked=true; else is_checked=false; document.getElementById('checkbox_other1').checked = is_checked;" style="width:310px; border:0 none;" name="other1" id="other1" value="<?php echo $other1;?>" /></td>
<td class="td_odd"><input type="checkbox" name="checkbox_other2" id="checkbox_other2" /></td>
<td>Other:<input onBlur="if (this.value.length > 0) is_checked=true; else is_checked=false; document.getElementById('checkbox_other2').checked = is_checked;" style="width:310px; border:0 none;" name="other2" id="other2" /></td>
</tr>
</table>

</div>
</form>

</body>
</html>

4

Le 10/06/2010 à 09:27

1) you can use class.. just look at the examples...

2) just read the examples, it could help you...

Ancien pseudo : lolo