Dashboard printing: cannot scroll past first page

Grafana
1

Here’s my stats:

Grafana version: 5.2.2
OS: Ubuntu 16.04
Datasource: Zabbix
Browser: Chrome + IE + Firefox

We’re using Grafana with the Zabbix datasource as a way to visualize server metrics and print a weekly report to PDF. It worked fine up until the GUI changed a little (around version 5.0?) and now when trying to print a dashboard, it won’t render more than what’s visible on the first page. I’ve tried doing this in Chrome, Firefox and IE and they all behave the same way. Has anyone else come across this? It behaves the same way whether printing to PDF or an actual printer.

Here’s a screenshot of my print preview. The dashboard has many more panels but you can see it’s cut off at “Network” and won’t scroll any further.

1355×903 108 KB

2

That’s because scroll bar is created by a web page, not by a browser (it is a feature). It is a problem also for full page print screens.

Nasty hack: edit DOM with browser dev tool before print/print screen and remove “scroll-canvas” texts:

image
image2257×938 129 KB

3

Welp, that definitely works - thanks for the workaround. Not an ideal long-term solution though unless I can somehow force the page to remove that every time.

4

Other hacking options:

  • write browser extension to remove “scroll-canvas”
  • add text (html) panel to dashboard with html content
<style>
.scroll-canvas {all: unset;}
</style>

Probably the best solution will be if the scroll-canvas class will be overridden in the print CSS.

5

Thanks so much - I added a tiny html panel with the code and it’s working great.

6

How do you add html panel in the dashboard? There is a plugin for that?

7

ah it is the text panel. But once you write the html code, all menus disappear, and you can’t save it :wink:

8

That’s CSS hacking = you may need to configure more CSS attributes because Grafana CSS is not static and it can be changed between versions.

9

thanks for workaround to save/print the dashboard to PDF, as i am not using enterprise version. but if i am not that techsavvy to
write browser extension to remove “scroll-canvas”
add text (html) panel to dashboard with html content
is can i ask you to provide little steps on how i can do that?
i am using firefox 67 to access grafana gui.

thanks in advance