Hi,
I create dynamically unsorted list (ul-li). It is bigger than space in a page. I would like to break the list, but it is (whole list) moved to next age. I tried set <ul style="page-break-inside: never">, but no effect
(Designer 2022.2 & 2019.2)
Thanks for advice.
Sławek
Hi,
hope someone else will provide a better answer, but one workaround would be creating a unordered list per element with style margin:0. That way it looks like a single list, but it should break after each value.
<ul style="margin:0">
<li>first value</li>
</ul>
<ul style="margin:0">
<li>second value</li>
</ul>
If you create the list dynamically it should not be the problem to create it that way in a script.
Of course, if you want to a bunch of values stick together you can create a <ul> element per bunch.
This should work out of the box. We automatically break lists (including unordered lists) across pages, while respecting any widows/orphans settings.
There are some limitations, like the fact that the list should not be inside a div or table.
Thanks for reply. I found out that <ul>-<li> doesn’t divide through pages only if it start from 1st page (then all ul-il is moved to 2nd page) and is bigger than space in 1st page. When I simulate starting ul-il from 2nd page, it is devided. 1st page I have configured in ‘Master Pages’ with Header: 11cm.
Moreover, if I add dynamic tables (in source code like below), even if ul-li fit to 1st page it is also moved to 2nd page. I don’t know why 
<ul class="lista">
<li id="liFIRMA">odnośnik dla Firma</li>
<li id="liLTE">odnośnik dla LTE</li>
</ul>
<div id="tabelaFirma"> //before this will be inserted dynamic table from js script
</div>
<div id="tabelaLte"> //before this will be inserted dynamic table from js script
</div>
Any suggestions?
Hard to say without seeing the full HTML content.
Something to keep in mind is that widows/orphans is set to 2 by default, which means a list with 2 items is never split up. If you want a list with 2 items to be broken across pages (with one list item on one page, and the other list item on the next) you’ll need to set widows/orphans for the list to 1.
@wowersla, can you please the Template file (*.OL-template), from which all sensitive data has been removed, please?
It seems to be caused by the tabFIRMA script. See the marked lines in the image below. It baiscally inserts a list at an invalid location (within the structure of the table). Commenting these lines seems to fix the problem.
Just to be clear, a list in a table cell is perfectly valid HTML. The list items will just not be split across pages. As I said in my first comment:
the list should not be inside a div or table
Wow! Thank you.
Is nesting ul-li inside table not allowed? Sander answered, thanks 
Indeed, after ul-li inside table being commented - all is right, thank you!
What in exchange for ul-li inside table?
<p style="text-indent: ...">;Best regards,
Sławek
Unfortunatelly, after deleting <LI> </LI> - output isn’t broken
for (let tab in record.tables.tabFIRMA[0].tables.wiersz)
{
wiersz += rowPattern.replace('@lcWiersz@', lcWiersz);
wiersz = wiersz.replace('@kol1@', getNumbersInTable(numbersFIRMA[tab]));
let kol2 = record.tables.tabFIRMA[0].tables.wiersz[tab].fields.kol2.replace(/<LI>/g, '').replace(/<\/LI>/g, '');
wiersz = wiersz.replace('@kol2@', kol2);
lcWiersz +=1;
}
Table in table also doesn’t break page
The reason for this is because a table will be spread over multiple pages on table rows and not on the contents of table rows, as @Sander mentioned, and I quote:
Just to be clear, a list in a table cell is perfectly valid HTML. The list items will just not be split across pages
Ah right, I overlooked the in the script, the structure is indeed correct.
@Marten:
I deleted ul-li from table. Change to
<p>,<br>,Unfortunately table isn’t spread over pages
I would like to have ul-li on the 1st page and table started on the 1st page and continued on the 2nd page (my example shows that first table row could be on 1st page (there is sufficient space) and the last row would be on the last page).
Is it possible?
Eventually ul-li could be on 1st page and table could be on 2st page.
Now 1st page is empty, and ul-li + table are moved to 2st page
Best regards,
Sławek
Unfortunately, the following also applies to wrapping <p>-elements into <td>-elements.
[…] a table will be spread over multiple pages on table rows and not on the contents of table rows.
A solution will be to place the <p>-elements outside the <table>-element.
Probably last question in my case:
disable tabLTE, so I have ul list and dynamic table:
why, when on the 1st page there is no space for one table-row, both ul and the table are moved to 2nd page, instead only the table?
Looked at the template a bit more, it feels like a bug in our pagination algoritm where it trickles over list items in cells of dynamic tables (following @Sander 's comment). As a workaround you could use paragraphs instead and use CSS to style them as list items.
Try the following:
Open your tabFirma and replace the line where you insert the values from kol2 with the snippet below:
let kol2 = record.tables.tabFIRMA[0].tables.wiersz[tab].fields.kol2
let kol2paragaphs = kol2.replace(/<LI>(.*?)<\/LI>/ig, '<p class="list">$1</p>');
wiersz = wiersz.replace('@kol2@', kol2paragaphs );
This replaces the <LI> elements in your data with paragraphs. I’ve added a class (.list) so you can style them as list items using the following CSS (add to your .css files):
.list {
display: list-item;
margin-bottom: 0.5em;
margin-left: 1em
}
Hope this helps.
Erik
I’ve made your advice Erik (thanks) - <p> inside <td> - this works the same like ul-li.
Problem is elsewhere: when I have ul-il at the top of my html structure and only one table tabFirma enabled, it’s all right: top ul-li is on 1st page and table starts on 1st page and is continued on 2nd page (the same with <p> or ‘
<td>. Moreover, testing with short text <p> or <li> and two tables tbFirma and tabLte enabled doesn’t cause moving top ul to 2nd page.
The most important to me is to avoid moving top ul-li from 1st page to 2nd page nevermind what is below the unsorted list.
Best regards,
Sławek
I guess this is caused by the widow and orphan settings of the table. Try adding the following CSS to your template:
table {
widows: 1;
orphans: 1;
}
