The goal is to format a long page for printing by inserting page breaks. The obvious choice would be this CSS property. The topic has an example with columns, using some dev tools, e.g. Chrome DevTools, it can be easily converted to page break with two changes:
- change break-before property value to “page”
- disable property “column-width” for tag “article”
By copying the abovementioned example to the local machine and playing with it a bit I found out that by adding “position: absolute” to the element of interest or adding a parent div with the same property breaks printing.
Then I built a simple example in Bubble, added a couple of elements with IDs to control them in CSS (with a simple HTML Bubble element - the app is on a free plan), printing didn’t work. Quick research with the same DevTools revealed parent elements with “position: absolute” properties. It was “.bubble-r-line .bubble-r-box”. Disabling the property completely broke the whole page and hid almost everything in print preview.
The question is if there’s any way to insert page breaks without ruining everything on the page?