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 breaks for nested <ul> tags #2422

Closed
FaitAccompli opened this issue Mar 26, 2025 · 2 comments
Closed

Page breaks for nested <ul> tags #2422

FaitAccompli opened this issue Mar 26, 2025 · 2 comments
Labels
CSS Questions about how to do something with CSS

Comments

@FaitAccompli
Copy link

I currently have an issue with weasyprint version 62.3 where I can't force a page-break on the second <ul> if it's nested inside a <div>

Given this simple layout

<body>
    <div class="some_class">
        <div class="header" style="margin-top: 130px;margin-left: 200px;">something1</div>
        <div class="header" style="margin-top: 160px;margin-left: 200px;">something2</div>
        <div class="header" style="margin-top: 190px;margin-left: 200px;">something3</div>
        <div class="header" style="margin-top: 130px;margin-left: 520px;">something4</div>
        <div class="header" style="margin-top: 160px;margin-left: 520px;">something5</div>
        <div class="header" style="margin-top: 190px;margin-left: 520px;">something6</div>

        <div class="header" style="position: absolute; margin-top: 320px;margin-left: 58px; width: 850px;">
            <p>Some paragraph:</p>
            <p></p>
            <ul>
                <li>some value title 1</li>
                <ul>
                    <li>some description</li>
                    <li>some value</li>
                </ul>
            </ul>
            <p><!-- x-tinymce/html --></p>
            <p></p>
            <ul>
                <li>some value title 2</li>
                <ul>
                    <li>some description</li>
                    <li>some value</li>
                </ul>
            </ul>
            <p><!-- x-tinymce/html --></p>
            <p></p>

            <p>Some referral <a href="https://some_url">some_url</a>.
            </p>
        </div>

    </div>


</body>

My css looks like this

div > ul:nth-of-type(2) {
  display: block;
  border: 2px solid red;
  break-after: always;
}

I'm expecting that the second <ul> will be on the next page. Also note that some_class is a div with a background-image that fills a single page. I'm thinking that it's the one causing the issue. Is there a workaround for this?
@liZe liZe added the CSS Questions about how to do something with CSS label Mar 27, 2025
@liZe
Copy link
Member

liZe commented Mar 27, 2025

Hi!

I'm expecting that the second <ul> will be on the next page.

Your CSS asks for a page break after the second ul, not before. If you want to put your second ul on the second page, you want to add a page break before it, so you have to use break-before instead of break-after.

(There’s also a problem in the way your ul tags are nested: you can’t put a ul directly in a ul, you have to put them in a li tag:

<ul>
  <li>A</li>
  <li>B
    <ul>
      <li>B1</li>
      <li>B2</li>
    </ul>
  </li>
  <li>C</li>
</ul>

That’s a very common error that may cause strange bugs, it’s safer to use this structure instead.)

@FaitAccompli
Copy link
Author

FaitAccompli commented Mar 28, 2025 •
edited
Loading

Hi @liz, thanks for the swift response. With regards to this

Your CSS asks for a page break after the second ul, not before. If you want to put your second ul on the second page, you want to add a page break before it, so you have to use break-before instead of break-after.

This was just an honest mistake because I tried simplifying the issue here, I meant for it to be break-before for this issue. In the original code it's break-after because there are more elements. I wanted that for each page it would break for every nth element.

I was able to get this to work by setting the background image height to auto and using position relative instead of absolute.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS Questions about how to do something with CSS
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liZe @FaitAccompli