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

Margin is not applied to running tables #2013

Closed
SystemError7 opened this issue Dec 5, 2023 · 8 comments · Fixed by #2051
Closed

Margin is not applied to running tables #2013

SystemError7 opened this issue Dec 5, 2023 · 8 comments · Fixed by #2051
Labels
bug Existing features not working as expected
Milestone
61.0

Comments

@SystemError7
Copy link

I wanted to generate a sign box to be in every page. I tried this code because it worked with images and text, but is not working with tables.
This is the code:

    <style>
      @page {
        margin-top: 2cm;
        margin-left: 0cm;
        margin-right: 0cm;
        margin-bottom: 1.25cm;
        @bottom-left {
          content: element(secondFooter);
        }
      }
      #Footer {
        position: running(secondFooter);
      }
    </style>

  <body style="margin-left: 0; margin-top: 0">
    <div style="width: 210mm; height: 297mm; position: relative">

      <div
        id="Footer"
        style="position: absolute; bottom: 0; width: 100%; height: 1.25cm"
      >
        <table style="border-collapse: collapse; vertical-align: middle; overflow: visible; border-style: solid; border-color: rgba(0, 0, 0, 0.1); width: 4.75cm; margin-left: 15cm">
          <thead style="display: table-header-group;">
            <td>
              <p style="text-align: center; font-size: 8pt">
                <span> Sign </span>
              </p>
            </td>
          </thead style="display: table-header-group;">
        </table>
      </div>

    </div>
  </body>

It should be repeating the following image in every page:
image

But the except for the first page, the rest of the pages it looks like this:
image
@liZe
Copy link
Member

liZe commented Dec 5, 2023

Hi!

Thanks for reporting this issue. Is the problem that borders are not drawn? If it’s the case, that’s actually a duplicate of #1278.

@SystemError7
Copy link
Author

Maybe with the issue belong with the borders, but not with the problem of the margin left.

The first page has the element in the right side, while the other is in the left side.

Thanks in advance!

@liZe
Copy link
Member

liZe commented Dec 5, 2023

Maybe with the issue belong with the borders, but not with the problem of the margin left.

Oh, that’s strange.

@liZe liZe added the bug Existing features not working as expected label Dec 5, 2023
@SystemError7
Copy link
Author

Update:
I tried another way, with border, padding and <p>, to recreate the sign box.

So, I applied in both styles (content, #Footer), different background-colors, but it doesn't applied to the PDF.

Here's the code:

    <style type="text/css" media="print">
      @page :first {
        margin-top: 2cm;
        margin-left: 0cm;
        margin-right: 0cm;
        margin-bottom: 2cm;
      }
      @page {
        margin-top: 2cm;
        margin-left: 0cm;
        margin-right: 0cm;
        margin-bottom: 2cm;
        @top-left {
          content: element(encabezado);
        }
        @bottom-left {
          background-color: saddlebrown;
          content: element(secondFooter);
        }
      }
      #Footer {
        position: running(secondFooter);
        background-color: aqua;
      }
    </style>

  <body style="margin-left: 0; margin-top: 0">
    <div style="width: 210mm; height: 297mm; position: relative">

      <div
        id="Footer"
        style="position: absolute; bottom: 0; width: 100%; height: 1.25cm"
      >
        <p
          style="
            text-align: center;
            margin-left: 150mm;
            position: absolute;
            bottom: 0;
          "
        >
          <span
            style="
              background-color: lime;
              font-size: 8pt;
              border-color: rgba(0, 0, 0, 1);
              border-style: solid;
              padding-top: 2.5mm;
              padding-bottom: 2.5mm;
              padding-left: 20mm;
              padding-right: 20mm;
              display: inline-block;
            "
          >
            Sign
          </span>
        </p>
      </div>

    </div>
  </body>

This is the result in all pages:

image

@SystemError7
Copy link
Author

The bug is produced if position: absolute is in the style of the <p>.

Idk why that is producing the bug of the background-color

@liZe
Copy link
Member

liZe commented Dec 5, 2023

There are 3 different problems:

I think that the third problem is not a bug in WeasyPrint. If your p is absolute, then #Footer doesn’t have any in-flow child, and thus its size it 0×0. That’s why you don’t get the background color. That’s exactly like:

<div style="background: red; position: relative"><p style="position: absolute">abc</p></div>

I’ve renamed the issue to focus on the second problem.

@liZe liZe changed the title content: element(running) not working well Margin is not applied to running tables Dec 5, 2023
@SystemError7
Copy link
Author

Okey,
I think is better for you or Weasyprint developers.

If I find something I will comment.

@SystemError7
Copy link
Author

Maybe occur in all elements in the footer.
I tried the following code:

    <style type="text/css" media="print">
      @page {
        margin-top: 2cm; /* Espacio para el encabezado */
        margin-left: 0cm;
        margin-right: 0cm;
        margin-bottom: 1.25cm; /* Espacio para el pie de página */
        @top-left {
          content: element(encabezado);
        }
        @bottom-left {
          content: element(footer);
          background-color: antiquewhite;
        }
      }
      #feet {
        position: running(footer);
      }
    </style>

  <body style="margin-left: 0; margin-top: 0">
    <div
      id="Father"
      style="width: 210mm; height: 297mm; position: relative; overflow: hidden"
    >
      <footer
        id="feet"
        style="position: absolute; width: 100%; height: 1.25cm; bottom: 0; background-color: aqua;"
      >
        <p style="margin-left: 30mm; margin-top: 2mm;">
          <span style="font-size: 8pt;"> Sign </span>
        </p>
      </footer>
    </div>
  </body>

The first page is showing the following way:
image

The following pages:

image

This was referenced Jan 29, 2024
Merged
Merged
@liZe liZe added this to the 61.0 milestone Feb 2, 2024
@liZe liZe closed this as completed in #2051 Feb 2, 2024
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
61.0
Development

Successfully merging a pull request may close this issue.

Fix computed values on table element overwritten after first page in running tables kygoh/WeasyPrint
2 participants
@liZe @SystemError7