Optimizing the print rendering

Need help
1

Hi

I made a page that generate a document based on different data, and I am trying to optimize the rendering to avoid page breaks in the middle of pictures or paragraphs.

The document itself is mainly a large repeating group with nested repeating groups inside.

Here are my concerns

image
image1305×898 181 KB

image
image1305×898 123 KB

I tried to play a bit with CSS Tool plugin, adding the following CSS. The CSS is properly loaded on the elements, but it doesn’t change anything on the results. I would need CSS expertise based on Bubble generated HTML :slight_smile:
I use new responsive engine. Any idea?

<style>
    @media print {
        .bubble-element.Text {
            break-inside: avoid-page !important;
            page-break-inside: avoid !important;
            overflow: visible !important;
            display: block !important;
        }
        img {
            break-inside: avoid-page !important;
            page-break-inside: avoid !important;
        }
    }
</style>
2

No ideas ? :cry:

3

Hi! Looks like very long and interesting story;)

From one side (only as an idea) in responsive your can limit the maximum height of cell by the height of page - then check - if if the cell index is not maximum in this repeating group - send this index to next rg through a state to display from next item, and stop showing rg on this item this page.

It’s just like a mindflow - actually really interesting case…

Can you show at least opened elements tree to understand content organization on page, or even better to explain it:)?

4

Hi, thanks for your anwser.
The idea of limiting a group to a page wont do it as document may differ in length etc.

Here is a (part) of the element tree

image
image3322×2134 795 KB