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

Bottom text in table layout page #614

Open
mndzielski opened this issue Dec 1, 2020 · 2 comments
Open

Bottom text in table layout page #614

mndzielski opened this issue Dec 1, 2020 · 2 comments
Assignees
@danfickle

Comments

@mndzielski
Copy link

Hi @danfickle, @syjer

I've found some issue after upgrade from version 1.0.4 to 1.0.5.

Till now, I had such template:

layout

<!DOCTYPE html PUBLIC "-//OPENHTMLTOPDF//DOC XHTML Character Entities Only 1.0//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title>Lorem document</title>
    <style type="text/css">
        @page {
            size: A4;
            margin: 32px;
            background-color: #fafafa;
        }

        *, ::after, ::before {
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #b86eab;
        }

        body {
            font: 16px/1.4 'Nunito', 'DejaVuSans', sans-serif;
            background-color: #fafafa;
            word-wrap: break-word;
        }

        .align-top {
            vertical-align: top !important;
        }

        .align-bottom {
            vertical-align: bottom !important;
        }

        /* table */

        table.layout {
            background-color: #fffcdd;
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }

        table.layout td {
            vertical-align: top;
            padding: 0;
            margin: 0;
        }

        .bottom-text {
            margin-bottom: 1px;
        }
    </style>
</head>
<body>
<table class="layout">
    <tbody>
    <tr>
        <td class="align-top" style="background-color: #ffacb1;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
            et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
        </td>
    </tr>
    <tr>
        <td class="align-bottom" style="background-color: #9ee5a1">
            <div class="bottom-text" style="background-color: #7c7cb0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

The trick was to use:

   .bottom-text {
            margin-bottom: 1px;
        }

to prevent bottom text flow to next page.

But since version 1.0.5 it not works this way anymore.

Not it requires at least

   .bottom-text {
            margin-bottom: 3px;
        }

I've also discovered its somehow connected with line-height property (after removing 1.4 line-height it requires only 1px).

Happy debugging 😀
I will be very grateful if it works without any margin-bottom tricks.
@mndzielski
Copy link
Author

Since 1.0.5 result is:

pobrane (26)

pobrane (27)

@syjer
Copy link
Contributor

syjer commented Dec 3, 2020

Well, tracking this regression will not be easy.

Btw by looking at the css, I wonder if the output was correct before. Using vertical align on td seems quite strange.

@danfickle danfickle mentioned this issue Dec 4, 2020
Closed
@danfickle danfickle self-assigned this Jan 3, 2021
@danfickle danfickle mentioned this issue Mar 1, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@danfickle danfickle

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@syjer @danfickle @mndzielski