Kibana dashboard embed in iframe

Elastic Stack Kibana
1

Hi all,
i'm finding problems embedding kibana dashboards in iframe on ipad device using both safari and firefox. (dashboard go over the maximum visible page size)

Some one have a template html that manage them correctly?

Many thanks

Filippo

2

This doesn't really have to do with Kibana being embedded in an iframe. There is an open issue to improve the experience of using Kibana on mobile: https://github.com/elastic/kibana/issues/2563

3

You are right Tim,
but how to make iframe to fit 100% height and width of the page?
beacuse the kibana genereted link to embed dashhboard has a fixed 660*800 px diemnsions.

Many thanks

Filippo

4

You can remove the dimensions of the iframe tag, and add some CSS to the page to style the iframe so it takes up the entire dimensions of the window.

This is more of a basic HTML/CSS question, but I don't mind helping out. I grabbed some HTML code for an "Embedded iframe" saved visualization, which was:

<iframe src="https://my-kibana-url.local:5601/app/kibana#/visualize/edit/673fe120-6e78-11e7-bb4c-c5fcde858343?embed=true&_g=(refreshInterval%3A(display%3AOff%2Cpause%3A!f%2Cvalue%3A0)%2Ctime%3A(from%3Anow-5y%2Cmode%3Aquick%2Cto%3Anow))" height="600" width="800"></iframe>

Then I put the iframe tag into an HTML file, removed the height and width attributes from the iframe tag, and added some CSS to make the iframe take up the entire page:

<!DOCTYPE html>
<html>
  <style type="text/css">
    html, body { margin: 0; padding 0; width: 100%; height: 100%;}
    iframe { border: 0; width: 100%; height: 99%; }
  </style>
  <body>
    <iframe src="https://my-kibana-url.local:5601/app/kibana#/visualize/edit/673fe120-6e78-11e7-bb4c-c5fcde858343?embed=true&_g=(refreshInterval%3A(display%3AOff%2Cpause%3A!f%2Cvalue%3A0)%2Ctime%3A(from%3Anow-5y%2Cmode%3Aquick%2Cto%3Anow))"></iframe>
  </body>
</html>
5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.