How to prevent rows from splitting in two when printing

Anvil Q&A
1

We are in 2020 and some users still like to print what they see on the browser. Oh well…

I have problems printing a form with a data grid because rows are split right in the middle and are not readable.

I tried adding this to the css:

@media only print {
  .content, .nav-holder {
	display: block;
    height: auto;
    overflow: visible;
  }
  
  .link-text {
    border: 2px solid red;
    page-break-inside: avoid;
  }
}

But the problem still exists.

Here is what I see on the form and on the print preview:
image
image

The row that starts with “Hats” is split in two. Even worse, the next row should have two texts (links) side by side, instead one is rendered below the other.

These snapshots are done with Chrome.
Firefox still prints only the first page.
Edge just makes a mess.

Any idea about how to prevent the rows being split in two and get the printing to work consistently across browsers?

2

The browser’s user can override fonts, font sizes, colors, paper sizes, margins, page-scaling factors, … you name it. And they do that, often, so that they can solve problems just like these, in their own time frame.

I do it almost daily. Some days, a dozen times a day.

With the end-user having so much control over the page-layout parameters, if you want to solve the problem at your end, reliably, then you need to take that control back: e.g., use a format, like PDF, where you set all those parameters, and the pages are formatted to fit those parameters, before the user ever gets to see them.

3

Hi @stefano.menci,

Two problems we can tackle separately, I think:

Any idea about how to prevent the rows being split in two?

This is probably something to do with the CSS of how our DataGrid works. It’s very difficult for us to diagnose from a screenshot - are you able to reproduce it with a simple app (maybe load some sample data into a similarly-formatted DataGrid)?

and get the printing to work consistently across browsers?

Printing across browsers is an inconsistent nightmare. Rather than spending ages tweaking CSS, what I would suggest is instead generating a PDF, and letting them download and print that! (Here’s an example.)

Now, of course, you’ll still have to fix it in Chrome (which is what we use to render the PDFs behind the scenes) – but at least it will be consistent once that’s done!