Can the size in pixels, vh or other units of a dashboard in an iframe or its visualizations be calculated? How is its size connected with the gridData width and height?

[DMinovski]

Is there a way to get a dashboard-in-iframe's height in pixels or other CSS units that can be measured in the browse and its viewport, outside Kibana? Or maybe get the height of individual visualizations based on their gridData.

With Chrome Dev Tools some elements can be inspected and their size found, but this is about calculating it beforehand.

When adding visualizations on a dashboard, they have parameters for the property gridData:

gridData": {
"x": 24,
"y": 0,
"w": 24,
"h": 15,
"i": "visualization-id"
}

How are the width and height connected to the resolution that is displayed in the browser?
In this answer, they wrote that the number of columns was expanded to 48, and there is a link to the GitHub commit: Grid layout sizing changed after upgrade from 6.2.4 to 6.7.1 - #3 by timroes.
But, how is the visualization height connected to the height of the iframe in pixels? If the iframe is created with less width, then the dashboards get less wide, but if it's created with less height, then a longer scroll appears. The visualizations' width gets compressed, but not their height.

If we know that the dashboard has 2 visualizations with "h": 15 one below the other, can its height be calculated? It's going to be 30 of these units, but what do they mean in pixels?

How are "w": 24 and "h": 15 mapped to pixel size, and can we get the size in pixels from them? For example, if "h": 15 is equivalent to 400 pixels. The width would be dependent on the iframe width, but the height seems unchanged when changing the iframe height, only the scrollable sidebar changes.

[Hannah_Mudge]

Thanks for the question, @DMinovski!

If we know that the dashboard has 2 visualizations with "h": 15 one below the other, can its height be calculated? It's going to be 30 of these units, but what do they mean in pixels?

Assuming you have the Use margins between panels setting set to false, the calculations for panel height are fairly straightforward. In this instance, the height of each "row" on the dashboard is a static value of 20px. So, if h = 15 as you say, then a single panel would have a height of 15 * 20px = 300px. So, if you're calculating the height of two panels, each with h = 15, stacked on top of each other, the height of the dashboard would be approximately 2 * (15 * 20px) = 600px

If Use margins between panels setting is set to true, on the other hand, the logic is a bit more complicated. This default padding is set to 8px and, as noted in this Github comment, it has some unexpected behaviour on the height/width of the panel. Without going into details, the padding is actually added multiple times - so, using the same example as before, the height of a single panel in this case would be (15 * 20px) + ((15 - 1) * 8px) = 300px + 112px = 412px. Therefore, the height of the entire dashboard, assuming there is two panels stacked, would be:

total_dashboard_height
   = 8px     // for padding at the top of the panel
     + 412px // the height of the first panel
     + 8px   // the padding between the two panels
     + 412px // the height of the second panel
     + 8px   // the padding at the bottom of the panel
   = 832px   // the final approximate height of the resulting dashboard

If the iframe is created with less width, then the dashboards get less wide, but if it's created with less height, then a longer scroll appears. The visualizations' width gets compressed, but not their height

As you mentioned, the width of the columns is dynamic, i.e. it depends on the size of the window - this is because we need to support multiple different screen sizes and, while a vertical scrollbar is acceptable and therefore we're okay having a static height, a horizontal scrollbar is not ideal. So you cannot do these types of static calculations for the width of panels.

Hopefully that helps! Let me know if you have a specific use-case that you are trying to solve with this question - I can do my best to help

[DMinovski]

@Hannah_Mudge

I'm generating a Kibana snapshot URL link with panels in the appState portion of the link, and the link is loaded into an iframe. The height of the iframe can be set with the height property of CSS to be pixels times the number of visualization rows, but I couldn't find what a visualization's height unit is equivalent to in pixels.

Thank you very much for the detailed explanation and for mentioning the padding. I marked your answer as a Solution.