I have a bulleted list that has two items. It appears at the end of a page. Although there is more than enough room on the page for the first item the entire list overflows to the next page.
How can I prevent this?
Thanks!
Hi JR,
The pagination algorithm currently does not support splitting lists across pages. This is on our backlog and currently being worked, it will surface in v1.8 (most likely to appear later this year).
Attached you’ll find a sample template using standard paragraphs. Within each paragraph I added a <span> element, which acts as our bullet. The style for each span is set via CSS in the context_print_styles.css (located in the Stylesheets folder of the Resources panel).
I’ve wrapped the paragraphs in an <article> element. This allows for a poormans windows and orphans control using the :first-child and :last-child pseudo selectors. You don’t want to end up with a single list item at the bottom or at the top of page.
The sample contains the following bullet types:
- Square (e.g. we have assigned the <span> a width and height)
- Round (achieved by assigning a border and border-radius of 50%)
- Triangle (achieved via a CSS trick I found on the web: CSS Triangle)
- Icon (by setting the background image of our <span> element).
This workaround is not very elegant and prob requires you to do some HTML source code editing or scripting. For now it does the job. As stated this will be fixed in a future version including support for the CSS content property.
Hope this helps,
Erik
This is awesome Erik! I was actually able to take this further and learn a few other things. However, it only appears as a bulleted list if none of the list items are more than one line. How do I get multiple line list items to have the same indent. From your template:
<article class=“list”>
<p>
<span class=“bullet square”></span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. What if the line extends to more than one line like in this example. How do we keep the appearance of a list? i.e.: how doe we keep all lines indented the same as the first? When there is more than one line the bullet gets lost.<br>
</p>
<p>
<span class=“bullet square”></span>Ut odio. <br>
</p>
<p>
<span class=“bullet square”></span>Nam sed est. Nam a risus et est iaculis adipiscing. <br>
</p>
</article>
Hi JR,
We can achieve that using a little trick… add a bit of padding-left to the <p> elements and add a negative margin-left to the <span> (e.g. our bullets). See the updated template: custom-list.OL-template
Erik
I see how this works.
Does page-break-after: avoid allow it to break if necessary? Or should I change this to automatic?
Thanks!
The one specified in the context_print_styles.css only applies to the very first paragraph element in the element. This way the first and second paragraph stay on the same page and prevent a so called ‘orphaned’ paragraph at the bottom of the page.
Thank You Erik! I will experiment more with this.