Hi,
I’ve a empty space in all of my graphs, and the problem is this fixed height:
<div class="react-grid-layout" style="height: 3374px;">
I don’t know how it appeared, but I don’t know how to get rid of it…
The graph look like this:
Best Regards,
You have not given many details so it may be difficult for people to help you. Which version of Grafana are you using? Which platform? Which browser/version? Which (exact) panel are you trying to use?
Hi,
I’m using grafana:
rpm -qi grafana
Name : grafana
Version : 8.2.0
Release : 1
Architecture: x86_64
Install Date: seg 11 out 2021 11:21:37 WEST
Group : default
Size : 224346537
License : “Apache 2.0”
Signature : RSA/SHA256, qui 07 out 2021 11:51:48 WEST, Key ID 8c8c34c524098cb6
Source RPM : grafana-8.2.0-1.src.rpm
Build Date : qui 07 out 2021 11:51:19 WEST
Build Host : 3a5d41802166
Relocations : /
Packager : contact@grafana.com
Vendor : Grafana
URL : https://grafana.com
Summary : Grafana
Description :
Grafana
In a centos 8.
The issue occurs in all browsers (i have tried google-chrome-stable-95.0.4638, firefox-94.0-1, brave).
Thanks,
Looking at the Grafana Play demo site it does seem that when you view a time series graph in full screen, although the graph panel itself is sized correctly for the screen, the outer layout (class react-grid-layout) is for some reason sized larger than the screen resulting in an unnecessary scroll bar and the gap below the graph as reported by the OP.
See here:
https://play.grafana.org/d/000000012/grafana-play-home?orgId=1&viewPanel=2
Maybe this is an issue which should be reported here?
So, it’s better open an issue?
Thanks,
@fapgomes Did you report it as an issue? I’m experiencing issues with the gap below the fullscreen panel too, when using it in an iframe.
Cheers,
Daniel
Not yet 
…
Thanks,
Do you need the navigation stuff like the top and left sidebar? If not you can use the d-solo url format which gets properly sized for the window (both on its own as well as inside an iframe). Just switch /d/ to /d-solo/ and viewPanel to panelId. The downside is you can’t zoom out this way, only drag to zoom in.
1 Like
Thanks @dczysz, that works perfect for dashboard panels! Do you know if there is an equivalent “solo” url for snapshots? Because fullscreen panels in snapshots, e.g. /dashboard/snapshot/?&theme=dark&orgId=1&viewPanel=6&from=1638371342770&to=1638371586055 have the same empty space below the panel
cheers
Daniel
Not that I can figure out. We can hide the extra junk but there’s still empty scrollable space below the panel. To hide the extra stuff and only show the panel, add &viewPanel=N&kiosk. Steps below:
Open your snapshot URL, here’s mine for example
http://10.0.0.53:3000/gr/dashboard/snapshot/5Derve3WjvnlMHMv3ZsCncA56uFZyZ8m?orgId=1
Then click the heading of the panel you want, click view. That will populate the URL with &viewPanel=N. (Or if you already know the panel # you can add it to the URL manually).
At this point it should look something like this:
http://10.0.0.53:3000/gr/dashboard/snapshot/5Derve3WjvnlMHMv3ZsCncA56uFZyZ8m?orgId=1&viewPanel=6
Now you can add &kiosk manually or click the “Cycle View Mode” button in the top right twice. That should give you the final URL of:
http://10.0.0.53:3000/gr/dashboard/snapshot/5Derve3WjvnlMHMv3ZsCncA56uFZyZ8m?orgId=1&viewPanel=6&kiosk
But like I said, this only hides the nav bars and still leaves the empty space below the panel.
@daniel6db8 On my version of Grafana 8.2.2, this hacky solution works to fix the scrolling:
document.querySelector('.react-grid-layout').style.height = 'auto';
You could add this to run after the page loads or after the iframe loads (if using this as an iframe and it’s on the same domain). Although it may change in future versions so you may have to update it in the future.
Thanks for your feedback! I was already doing what you described. Unfortunately I can’t manipulate the iframe contents so I guess I will create an issue…
cheers
Daniel