extra space after {{#pageHeader}} #4

bcyng · 2013-06-27T08:07:51Z

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?

as-cii · 2013-06-27T18:02:17Z

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 👍

Antonio

nicolamontini · 2013-09-09T09:25:15Z

Same problem for me. As soon as possible I'll post a sample template.

as-cii · 2013-09-09T12:23:47Z

@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 😄

nicolamontini · 2013-09-10T08:32:40Z

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.

nicolamontini · 2013-09-10T08:38:44Z

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>

nicolamontini · 2013-09-10T13:06:05Z

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?

nicolamontini · 2013-09-19T08:23:20Z

Any update to the library?

aaronwardle · 2013-11-22T00:37:59Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

extra space after {{#pageHeader}} #4

extra space after {{#pageHeader}} #4

bcyng commented Jun 27, 2013

as-cii commented Jun 27, 2013

nicolamontini commented Sep 9, 2013

as-cii commented Sep 9, 2013

nicolamontini commented Sep 10, 2013

nicolamontini commented Sep 10, 2013

nicolamontini commented Sep 10, 2013

nicolamontini commented Sep 19, 2013

aaronwardle commented Nov 22, 2013

extra space after {{#pageHeader}} #4

extra space after {{#pageHeader}} #4

Comments

bcyng commented Jun 27, 2013

as-cii commented Jun 27, 2013

nicolamontini commented Sep 9, 2013

as-cii commented Sep 9, 2013

nicolamontini commented Sep 10, 2013

nicolamontini commented Sep 10, 2013

nicolamontini commented Sep 10, 2013

nicolamontini commented Sep 19, 2013

aaronwardle commented Nov 22, 2013