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

Facing difficulties with the flexbox #2351

Closed
harkishankhuva opened this issue Jan 16, 2025 · 3 comments
Closed

Facing difficulties with the flexbox #2351

harkishankhuva opened this issue Jan 16, 2025 · 3 comments
Labels
bug Existing features not working as expected

Comments

@harkishankhuva
Copy link

Hello, so I'm trying to create a PDF from HTML that has flexbox in it, below is the code for the stylesheet and the HTML file

Stylesheet:

body {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
@page{
    size: "A4";
}

HTML

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="head_text">
      <p>
        Head text
      </p>
    </div>
    <div class="bottom_text">
      <p>
        bottom text
      </p>
    </div>
  </body>
</html>

This is the image what I see in the browser:
Image

But in the PDF it becomes like this:
Image

Since I didn't find any working solution other than generating the PDF with the headless browser, my last hope is using the weasyprint.
@liZe
Copy link
Member

liZe commented Jan 16, 2025

Hi!

Thanks for the report, this is unfortunately another bug with WeasyPrint’s flex layout.

WeasyPrint’s flex layout is known to be buggy, a lot of issues are already open. Good news: we’ll work seriously on it really soon. 😄

@liZe liZe added the bug Existing features not working as expected label Jan 16, 2025
@liZe
Copy link
Member

liZe commented Feb 7, 2025

Here’s a minimal sample showing the problem:

<style>
  html {
    height: 100%;
  }
  body {
    border: 1px solid red;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    margin: 0;
  }
</style>
<div class="head_text">
  <p>
    Head text
  </p>
</div>
<div class="bottom_text">
  <p>
    bottom text
  </p>
</div>

The body overflows the bottom of the page, we don’t even see the text and the border.

@liZe
Copy link
Member

liZe commented Feb 7, 2025

That’s actually what we also do for non-flex boxes. By setting body { box-sizing: border-box }, with various fixes already in flex` (see #2362), it now works as expected.

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