I have a Grafana dashboard displaying a combination of graphs within a single row - some are 4 units wide and others are 6 units wide. Specifically I have a row with three 4-unit graphs and two 6-unit graphs:
The row height is set to 300px in this screenshot and it all looks excellent. If, however, I set the row height to even 1 pixel larger, note how the positioning and wrapping seems to fall apart:
I have not made any strange customisations to the graphs, as far as I remember. The dashboard can be made available if someone wishes to see the underlying JSON.
In case it’s relevant this is Grafana 4.3.2 on Debian 8.8, installed from repositories; this layout worked fine in a previous version, though I cannot be certain whether it was a 4.1 release or a 4.2 release. The display fault appears in both Edge (1703 / 15063) and Firefox 53.
Can anyone else reproduce / explain what I’ve done wrong? 'Twould be much appreciated.
Grafana tries to calculate the heights of the different elements in a panel when resizing. Firefox (not sure about IE) renders font sizes with decimal places differently to Chrome. As font sizes with decimal places are not in any specification, each browser does it slightly differently and this can result in the legend being a pixel or two larger than expected. This is most definitely a bug in Grafana that we will try to fix soon.
Thanks @daniellee - yes it does sound like the same problem as the Git issue.
@torkel - I had not realised that wrapping rows was potentially a problem - is this called out somewhere? A few cursory Google searches did not substantially enlighten me. I’m happy to rework if it’s likely to be a long-lived problem.
