Archive

Increase Embedded Report Height

Splunk Employee
Splunk Employee

When enabling the embedded report, and including the iframe somewhere else, you can adjust the width, but the height seems to remain at 300px – even if you increase it.

Does anyone know how to increase the height of an embedded report? Changing the height of the iframe has no affect, but the width changing does work.

Tags (1)
0 Karma
1 Solution

Splunk Employee
Splunk Employee

To update with an answer, you can change the height of the visualization by dragging the divider in the middle of the visualization tab of a search, which adds the following to the saved search in the savedsearches.conf file:

display.page.search.tab = visualizations
display.visualizations.chartHeight = 634

Which in turn after click "embed" generates an iframe like so:
<iframe height="670" width="480" frameborder="0" src="…removed…"></iframe>

Notice how the iframe height before was 336 with a final embedded chart of 300px? Now the iframe is 634+36=670px.

View solution in original post

0 Karma

Splunk Employee
Splunk Employee

To update with an answer, you can change the height of the visualization by dragging the divider in the middle of the visualization tab of a search, which adds the following to the saved search in the savedsearches.conf file:

display.page.search.tab = visualizations
display.visualizations.chartHeight = 634

Which in turn after click "embed" generates an iframe like so:
<iframe height="670" width="480" frameborder="0" src="…removed…"></iframe>

Notice how the iframe height before was 336 with a final embedded chart of 300px? Now the iframe is 634+36=670px.

View solution in original post

0 Karma

Splunk Employee
Splunk Employee

Have you tried testing in a completely blank html page ?

I think you maybe have some other CSS that is overwriting the height attribute on the iframe element. I just tested this to double check - and height and width both allow you to change the size (it is not stuck at 300px).

Try using the developer tools on Chrome or Firefox to see if there is an overlap maybe ?

0 Karma

Splunk Employee
Splunk Employee

Just tried that.

<html>
<body>
<iframe height="600" width="980" frameborder="0" src="...removed..."></iframe>
</body>
</html>

The iframe indeed has a height of 600px, but the chart itself still remains at 300px.

Looking inside the iframe I see this as one of the first divs:
<div class="chart shared-jschart" data-cid="view938" data-view="views/shared/JSChart" data-render-time="0" style="width: 100%; height: 300px;">

This explains the dynamic width but the locked height.

I'm using Splunk 6.2.3 and viewing on Chrome on Mac OS X.

0 Karma