Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Header/footer absolute position in 7.1.0 #791

Closed
jukka-p opened this issue Jun 26, 2018 · 3 comments
Closed

Header/footer absolute position in 7.1.0 #791

jukka-p opened this issue Jun 26, 2018 · 3 comments

Comments

@jukka-p
Copy link

jukka-p commented Jun 26, 2018

A template we're using regressed when upgrading to 7.1.0 from 7.0.3 regarding an absolute positioned element in footer. The example I created produces two vastly different renders, where 7.1.0 version seems to be worse off.

$mpdf = new Mpdf(['mode' => 'utf-8', 'format' => 'A4']);
$mpdf->WriteHTML('
    <html>
        <head>
            <style>
                @page {
                    header: html_myHeader;
                    footer: html_myFooter;
                    margin-top: 7cm;
                }

                #header-content {
                    background: lightblue;
                }

                #footer-content {
                    background: lightgreen;
                }

                #absolute-element-header {
                    position: absolute;
                    top: 2cm;
                    left: 1cm;
                    background: purple;
                }

                #absolute-element-footer {
                    position: absolute;
                    bottom: 2cm;
                    right: 1cm;
                    background: yellow;
                }

                #absolute-element-body {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    background: red;
                }
            </style>
        </head>
        <body>
            <htmlpageheader name="myHeader">
                <div id="header-content">' . str_repeat('HEADER DIV ', 60) . '</div>
                <div id="absolute-element-header">ABSOLUTE ELEMENT HEADER</div>
            </htmlpageheader>

            <htmlpagefooter name="myFooter">
                <div>
                    <table id="footer-content">
                        <tr>
                            <td>' . str_repeat('FOOTER TABLE ', 60) . '</td>
                        </tr>
                    </table>
                </div>
                <div id="absolute-element-footer">ABSOLUTE ELEMENT FOOTER</div>
            </htmlpagefooter>

            <div>' . str_repeat('CONTENT ', 180) . '</div>
            <div id="absolute-element-body">ABSOLUTE ELEMENT BODY</div>
        </body>
    </html>'
);

In 7.0.3, the absolute element of header is missing completely:
image

While in 7.1.0, the header and footer contents are gone, except for header background color:
image

This change is attributable to 01f9bfe, though I haven't got a clue on why it changes that much.
@jakejackson1
Copy link
Contributor

Absolute positioning of the header/ footer in 7.0.3 is fundamentally broken. For example, if you add another page to the PDF you'll find that along with the header not displaying, the absolute-positioned footer on page 2 onwards won't display either.

From your example, more work will need to be done to support both absolute and non-absolute positioned content in the header / footers at the same time, but your issue can be easily fixed in 7.1.0 by absolute positioning the non-positioned elements:

#absolute-element-footer2 {
	position: fixed;
	bottom: 0;
	left: 0;       
}

<div id="absolute-element-footer2">
	<table id="footer-content">
		<tr>
			<td>' . str_repeat('FOOTER TABLE ', 60) . '</td>
		</tr>
	</table>
</div>

Until support for both positioned and non-positioned types is added to Headers / Footers, I think a note in the documentation would be a good idea.

@jukka-p
Copy link
Author

jukka-p commented Jun 27, 2018

I see, I was not aware of how it was broken on multi-pages in 7.0.3. That is broken indeed, and the absolute positioning functionality becomes consistent in 7.1.0 with multiple pages, even though it then requires some additional conditions. In the example, adding positioning to header content with

#header-content {
    position: fixed;
    background: lightblue;
}

has the header working correctly on multiple pages instead of just the first.

If I do the same for footer content as

#footer-content {
    position: fixed;
    background: lightgreen;
}

I now have a Warning: Division by zero at Mpdf.php:16047. That's seems to be due to fixed elements being on on top of each other and fixed by adding bottom modifier:

#footer-content {
    position: fixed;
    bottom: 0;
    background: lightgreen;
}

Result as multiple pages:
image
image

@jakejackson1 jakejackson1 mentioned this issue Jul 2, 2018
Merged
@finwe
Copy link
Member

finwe commented Aug 8, 2018

@jukka-p Can you please create a new issue about the Warning you are getting for sake of clarity? I am going to close this one as I believe its former topic has been clarified.

@finwe finwe closed this as completed Aug 8, 2018
@jukka-p jukka-p mentioned this issue Aug 8, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@finwe @jakejackson1 @jukka-p