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

Page margins being ignored when using a single flexbox column #2066

Closed
ezarowny opened this issue Feb 12, 2024 · 2 comments
Closed

Page margins being ignored when using a single flexbox column #2066

ezarowny opened this issue Feb 12, 2024 · 2 comments
Labels
bug Existing features not working as expected

Comments

@ezarowny
Copy link

ezarowny commented Feb 12, 2024 •
edited
Loading

I'm using WeasyPrint 61.0 and I have a page structure like this:

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      @page {
        margin-bottom: 22px;
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 20px;
        size: letter;
      }

      body {
        display: flex;
        flex-direction: column;
      }

      .outer-container {
        border-color: #7F465C;
        border-style: solid;
        border-width: 0 2px 2px;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="outer-container">
      <div class="letter-body">
        <div class="letter-header">...</div>
        <div class="letter-header-img-container">...</div>
        <div class="letter-name">...</div>
        <div class="lots-of-text">...</div>
      </div>
    </div>
  </body>
</html>

I'm attempting to make the page content fill up the entirety of the last page of the document so the border of outer-container will be at the bottom of the last page instead of where the content ends. For some reason, it seems that the left and right borders always run to the bottom of the page on all pages except the last and completely ignores my page margins:

Screenshot 2024-02-12 at 12 31 12 PM

I ran into this problem when upgrading from v60.2 because my original implementation only renders the first page on v61.0 and nothing else. I think my original implementation was kind of a hack because I was applying CSS to the html element, but here it is for reference:

    html {
      height: 100%;
    }

    body {
      height: 100%;
    }

Which produced this on v60.2:

Screenshot 2024-02-12 at 12 36 09 PM

The last page of the document of my v61.0 implementation looks just like the above image so maybe page margins are only being applied against the entirely of the document instead of individual pages?
@liZe liZe added the bug Existing features not working as expected label Feb 17, 2024
@liZe
Copy link
Member

liZe commented Feb 6, 2025

I'm attempting to make the page content fill up the entirety of the last page of the document so the border of outer-container will be at the bottom of the last page instead of where the content ends.

You won’t be able to do this by setting height: 100%, because contrary to what’s done in browser, the size of the body is not the size of the page. If you force the different elements (html, body, …) to have height: 100%, the height of your flex container will be the height of one page.

But there’s a bug for sure about the size and the borders: even without height: 100% the flexbox reaches the end of the last page, and the borders overlap the page margins. Let’s fix that at least.

liZe added a commit that referenced this issue Feb 7, 2025
@liZe
Allow to break flex items when defining their height
c416404 
Fix #2066.
liZe added a commit that referenced this issue Feb 7, 2025
@liZe
Remove borders from flex containers when split between pages
f573f20 
Related to #2066.
@liZe
Copy link
Member

liZe commented Feb 7, 2025

Bug is closed and tested in the flex branch, see #2362.

@liZe liZe closed this as completed Feb 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liZe @ezarowny