PdfReportKit
PdfReportKit copied to clipboard
as-cii
extra space after {{#pageHeader}}
there seems to be extra space that {{#pageHeader}} adds after anything in {{#pageHeader}} and before {{pageContent}} starts.
This results in reports having black space at the top of the page if {{#pageHeader}} is empty. or space between any text in {{#pageHeader}} content and {{pageContent}}
Is there any way to get rid of it?
A solution could be to check first if there is some content inside pageHeader tag. Could you please post here a sample template that cause this issue?
Thanks for reporting the issue anyway @bcyng :+1:
Antonio
Same problem for me. As soon as possible I'll post a sample template.
@nicolamontini It would be great, thank you. As soon as you'll post it I will test it and commit a fix for this issue :smile:
In the previous post I did a little mistake. The extra space in my case comes between {{#documentHeader}} and {{#pageHeader}}. As you will see, I put a table with 17 rows in {{#documentHeader}} and below that you will see a high white strip (about 170px). This white strip is not rendered by an html tag, because the body tag is black. Therefore it must be something in the library... Below the strip there is the {{#pageContent}} ({{#pageHeader}} only contains a string). Obviously if {{#documentHeader}} contains only a small string, like in the example available in gitHub, the strip is not so high.
Here is the template:
<head>
<style>
body
{
font-family: Verdana, Verdana, Geneva, sans-serif;
background-color:#111;
}
.header
{
clear:both;
overflow: hidden;
padding: 20px;
background-color:blue;
}
.header img
{
width: 100px;
height: 100px;
float: left;
margin-right: 10px;
}
.header .myCompany
{
float: left;
font-size: smaller;
margin-top: -20px;
}
.header .otherCompany
{
float: right;
padding: 15px;
border: 1px solid lightgray;
background-color: #fafafa;
font-size: smaller;
}
.content
{
margin-top: 20px;
padding: 30px;
border: 1px solid lightgray;
background: #fcfcfc;
border-radius: 3px;
}
table
{
width: 100%;
font-size: smaller;
}
tr:nth-child(even)
{
background-color: #f0f0f0;
}
tr th
{
color: gray;
border-bottom: 1px solid lightgray;
}
tr th, tr td
{
font-weight: normal;
padding: 5px;
margin: 0;
width: 20%;
text-align: center;
}
td
{
font-size: smaller;
}
tr.master td{
background-color:red;
}
tr.detail td{
background-color:blue;
}
.footer
{
font-size: 12px;
padding: 20px;
margin: 0;
text-align: right;
}
.table-footer td{
background-color:#888;
}
.hidden {
visibility:collapse;
height:1px;
}
</style>
<meta name="viewport" id="view" content="width=320px, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
{{#documentHeader}}
<table>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td>PRIMA COLONNA</td>
<td>SECONDA COLONNA</td>
<td>TERZA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
<tr>
<td style="background-color:red">PRIMA COLONNA</td>
<td style="background-color:red">SECONDA COLONNA</td>
</tr>
</table>
{{/documentHeader}}
{{#pageHeader}}
EMPTY
{{/pageHeader}}
{{#pageContent}}
<div class='content' style='padding: 5px;'>
<table cellspacing='0'>
<tr>
<td><b>Codice Cliente:</b> 5</td>
<td><b>Telefono:</b> 3339998887</td>
<td><b>Agente:</b> Mario Verdi</td>
<td><b>Data Stampa:</b> 09/11/2012</td>
</tr>
</table>
</div>
<div class='content'>
<table cellspacing='0'>
<tr>
<th>Numero Doc.</th>
<th>Data Doc.</th>
<th>Data Scad.</th>
<th>Note Incasso</th>
<th>Importo Originario</th>
<th>Importo Effettivo</th>
<th>Importo Incassato</th>
</tr>
{{#articles}}
{{#master}}
<tr class="master">
<td>{{number}}</td>
<td>{{date}}</td>
<td>{{due}}</td>
<td>{{notes}}</td>
<td>€ {{originalTotal}}</td>
<td>€ {{effectiveTotal}}</td>
<td>€ {{receivedTotal}}</td>
</tr>
{{/master}}
{{#detail}}
<tr class="detail">
<td>{{number}}</td>
<td>{{date}}</td>
<td>{{due}}</td>
<td>{{notes}}</td>
<td>€ {{originalTotal}}</td>
<td>€ {{effectiveTotal}}</td>
<td>€ {{receivedTotal}}</td>
</tr>
{{/detail}}
{{#footer}}
</table>
<table cellspacing='0'>
<tr class="table-footer">
<td>Qui siamo nel footer zio</td>
<td>{{number}}</td>
<td>{{date}}</td>
<td>{{due}}</td>
</tr>
</table>
<table cellspacing='0'>
<tr class="hidden" height="1">
<th class="hidden" height="1">Numero Doc.</th>
<th class="hidden" height="1">Data Doc.</th>
<th class="hidden" height="1">Data Scad.</th>
<th class="hidden" height="1">Note Incasso</th>
<th class="hidden" height="1">Importo Originario</th>
<th class="hidden" height="1">Importo Effettivo</th>
<th class="hidden" height="1">Importo Incassato</th>
</tr>
{{/footer}}
{{/articles}}
</table>
</div>
{{/pageContent}}
{{#pageFooter}}
<div class='footer'>
Pagina {{pageNumber}}
</div>
{{/pageFooter}}
</body>
Tried to debug your library. In my opinion the error is in the way you calculate the height of the header of the single page. Actually you calculate it with the numberOfPages method + 20 in the PRKFakeRenderer's [contentHeight] method. In my case in the first page the [headerFakeRenderer numberOfPages] returns 491 + 20 = 511; I tried to set it to 511 - 120, and the white strip goes away.
It would be interesting to kown two things:
1- who does set the numberOfPages of the headerFakeRenderer to 491?
2- The height of the header is 569px (measured at runtime in the simulator, using an on screen ruler), so why do I have to set the height to 511 - 120 to avoid blank space?
I've had this issue also thanks for posting your findings I simply changed
- (int)contentHeight { [self prepareForDrawingPages:NSMakeRange(0, 1)]; return [self numberOfPages]+ 20; }
to
- (int)contentHeight { [self prepareForDrawingPages:NSMakeRange(0, 1)]; return [self numberOfPages]; }
Although I am not quite sure what this is exactly doing at the moment, have you tried removing the -20 and how does it work then with your PDF?
Thanks Aaron
