5

I have written a menu for an Italian restaurant. This menu consists of an unordered list where each li element has a class named "headline". Each of these li elements contains a headline and another ul inside with li-s as dishes.

It looks like this:

<ul>
  <li class="headline">
      <h3>Kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
  </li>
  <li class="headline">
      <h3>Another kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
  </li>
</ul>

I am trying to make a printable version of the menu and have no clue why either "page-break-after" nor "page-break-before" work on ".headline" in CSS.

I tried different display values like "block", "inline-block", or "table-row", because reading certain forums suggested it. I also tried different position values ("absolute","relative","static")...

I also tried to wrap the "headline" li-s with div elements and use page-break on the div elements:

<ul>
  <div>
  <li class="headline">
      <h3>Kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
  </li>
  </div>
  <div>
  <li class="headline">
      <h3>Another kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
  </li>
  </div>
</ul>

I start to believe that my only option is to re-think the unordered list concept or deliver a pdf-file on print-demand...

I think I would have chose the second method, because I use the li-s to toggle the ul-s in the mobile version.

Is there a fundamental error I do not see yet, or is it simply not possible to control where page breaks are done in unordered lists?

Edit: I tried different suggenstions of the "possible duplicate thread" and all what it does (I don't know if I am right there and can explain it properly) is that it tries to make page-breaks...

It generates space between the "headline" li-s containing the ul-s... Unfortunately the blank spaces appear in the middle of the pages (print preview and saved pdf) and have a certain height... so it doesn't really push the "headline" li-s on the next page... just slightly down wherever a "headline"li ends

sirdareDeviL
  • 83
  • 1
  • 9
  • 2
    Possible duplicate of [How to apply CSS page-break to print a table with lots of rows?](http://stackoverflow.com/questions/8712677/how-to-apply-css-page-break-to-print-a-table-with-lots-of-rows) – Kristján Oct 19 '15 at 15:23
  • Thank you! I will try this tomorrow! – sirdareDeviL Oct 19 '15 at 19:26

2 Answers2

0
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;

Add break-inside: avoid; to ul

Martirosian
  • 165
  • 4
0

I had the same problem adding page-break-after: always to the li. It was fixed by adding a div inside with page-break-after: always followed by an empty div. It works on both Edge and IE11 as well as on Chrome (not yet tested on Firefox).

Amending your example, it should look like the following:

<ul>
  <li class="headline">
      <h3>Kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
      <div style="page-break-after: always"></div>
      <div></div>
  </li>
  <li class="headline">
      <h3>Another kind of dishes</h3>
      <ul>
        <li>Dish 1</li>
        <li>Dish 2</li>
        <li>Dish 3</li>
      </ul>
      <div style="page-break-after: always"></div>
      <div></div>
  </li>
</ul>

Note: Do not repeat the page-break-after in your headline class.

d.i.joe
  • 606
  • 9
  • 22