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

Different behavior for text and elements for margin boxes #661

Closed
eburlaka opened this issue Feb 26, 2021 · 7 comments
Closed

Different behavior for text and elements for margin boxes #661

eburlaka opened this issue Feb 26, 2021 · 7 comments

Comments

@eburlaka
Copy link

Components with text content are placed on every page, but components where content is element are shown only on the last page. How to add html content to the footer on every page?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <style type="text/css">
    @page {
      size: 620px 877px;
      margin: 50px;
      font-size: 30px;

      @bottom-left {
        content: element(bottom-left-content);
        background: blue;
      }

      @bottom-right {
        content: 'BOTTOM RIGHT CONTENT';
        background: red;
      }
    }

    .page {
      font-size: 70px;
      line-height: 600px;
      text-align: center;
      border: 1px solid gray;
      page-break-inside: avoid;
    }
    .footer-left {
      position: running(bottom-left-content);
    }
  </style>
</head>
<body>
  <div class="page">1</div>
  <div class="page">2</div>
  <div class="footer-left">
    <b>BOTTOM LEFT CONTENT</b>
  </div>
</body>
</html>

12
@danfickle

This comment has been minimized.

Sign in to view
@danfickle
Copy link
Owner

Disregard my previous comment. It turns out that if you add the running elements as first children of the body element it works. I'm still debugging why this is, but given the easiness of the workaround, the "fix" might end up be adding a note to the page features doc on the wiki.

@danfickle
Copy link
Owner

danfickle commented Mar 1, 2021 •
edited
Loading

OK, after debugging, it seems this is by-design and as per the (somewhat confusing) paged media spec.

The idea is that the value returned can be updated with multiple elements using the one running position. Take this html for example:

<html>
<head>
<style>
@page {
  size: 200px 200px;
  margin: 20px;
  @bottom-left {
    background: blue;
    content: element(footer);
  }
  @bottom-right {
    background: red;
    content: 'FOOTER-R';
  }
}
.footer {
  position: running(footer);
}
</style>
</head>
<body>
  PAGE 1

  <div class="footer">
    FOOTER1
  </div>

  <div style="page-break-before: always;">PAGE 2</div>

  <div class="footer">
    FOOTER2
  </div>

  <div style="page-break-before: always;">PAGE 3</div>

  <div class="footer">
    FOOTER3
  </div>
</body>
</html>

When shown on the first page 'FOOTER1' is shown. On page 2, we reassign the footer running position to 'FOOTER2' and this is shown and so on. Therefore, if we remove 'FOOTER1', we can say that the running position for footer is unassigned on the first page and nothing is shown on that page.

I did not know it worked this way so it's been a learning experience.

I'll add a note to the wiki page.

@danfickle
Copy link
Owner

Re-assigning running elements on wiki

@eburlaka
Copy link
Author

eburlaka commented Mar 2, 2021

@danfickle, first of all, thanks for the quick reply
and if I have a long table with dynamic data (1-3 pages) and a footer should be placed on each of the pages, is there a way to do this?

@danfickle
Copy link
Owner

Just add the footer element just after the opening body tag and it should work for all pages.

@eburlaka
Copy link
Author

Just add the footer element just after the opening body tag and it should work for all pages.

After being placed at the beginning of the body tag it works, thanks!

@danfickle danfickle mentioned this issue May 9, 2021
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
2 participants
@danfickle @eburlaka