Iframe height

[DonRichards]

Iframe to load video, looks correct at first.

But then after saving and coming back it cuts off the bottom of the frame.

How do I correct this?

[ryantxu]

what parameters are you sending? and then seeing?

As an aside, can I ask you how you are using this? to explore digital library content?

[DonRichards]

I am running a nodejs app locally on the same machine. It produced 2 web pages. It randomly loads a video from a list of all of our video streams and other page does the same from a list of images. Both randomly selects a string from within an array and dynamically sets the url of the media upon request. This isn't requiring a page refresh or anything. I also set a div height so that it shouldn't cut off the page.

Here is a gist of what the browser sees for either one of them. https://gist.github.com/DonRichards/ee2384f31a7d21822dc00affc313212c

[dmke]

We've seeing this as well. We have a weather widget running in a dasboard in the public area and the initial frame height is just 150px. The surrounding panel (div.baron__scroller) has max-height style set (to whatever I want the panel size to be).

The devtools show an iframe element with an height attribute missing a value:

<div class="ngtemplate">
  <!---->
  <iframe frameborder="0" width="100%" height="" ng-src="https://internal.lan/weather/" ng-if="ctrl.panel.method === 'iframe'" src="https://internal.lan/weather/"></iframe>
  <!---->
</div>

The panel JSON looks like this:

{
  "datasource": "-- Grafana --",
  "gridPos": {
    "h": 18,
    "w": 13,
    "x": 10,
    "y": 14
  },
  "header_js": "{\n  Accept: 'image/jpeg'\n}",
  "id": 14,
  "links": [],
  "method": "iframe",
  "mode": "html",
  "options": {},
  "params_js": "{ }",
  "request": "http",
  "responseType": "blob",
  "showTime": false,
  "showTimeFormat": "LTS",
  "showTimePrefix": null,
  "showTimeValue": "recieve",
  "skipSameURL": true,
  "templateResponse": true,
  "title": "Weather forecast",
  "transparent": true,
  "type": "ryantxu-ajax-panel",
  "url": "https://internal.lan/weather/",
  "useDatasource": false,
  "withCredentials": false
}

If I resize the window (i.e. grabbing a window border and move is just 1px), the iframe snaps into place and is correctly displayed. I assume a resize event handler corrects the height, but is not invoked on load (anymore).

This happens independent of the view mode (kiosk mode or not), on the latest Grafana version (6.3.3). I believe, we're observing the current behaviour for the last 2-3 weeks, so this might coincide with the 6.3.0 release.

[dmke]

I forgot to add: This is with version 0.0.6.

Looking at https://github.com/ryantxu/ajax-panel#changelog, 0.0.7 should be available, however https://grafana.com/grafana/plugins/ryantxu-ajax-panel only lists 0.0.6.

Could you cut a proper release, so we can test whether that fixes the bug?

[DonRichards]

Not sure if the will fix the issue or not but it does look related. https://github.com/ryantxu/ajax-panel/pull/42

[DonRichards]

Nevermind, doesn't seem to fix this.

[ghost]

Dear all. The same problem here :-( Could you help us with a quick hack just until the new version is delivered? What should us modify in /var/lib/grafana/plugins/ryantxu-ajax-panel to have: height:100% ?

[DonRichards]

Located where I think the error is happening.

Found in src/module.ts Line 419. height="{{ ctrl.height }}" \ results in ... height="" ...

Setting the height to 510px in the DOM made the UI look correct. I'm not familiar with Grafana plugin debugging enough to help any further but I'm really hoping this can be corrected quickly. This page is kind of an eye sore right now.

[DonRichards]

Sorry, my post is mostly saying what @dmke already said.

[ryantxu]

I'll take a look at this today -- and hopefully post an fix

[ghost]

Thank you very much for your time. I really apreciate.

[ryantxu]

@DonRichards @tinotuno -- can you guys test with: https://github.com/ryantxu/ajax-panel/tree/v0.0.7/dist

You can get a zip from: https://github.com/ryantxu/ajax-panel/archive/v0.0.7.zip

If that fixes your issue -- I will get this published ASAP

[ghost]

Wow...! In my case, with external html pages in the iframe works perfectly! Thank you so much! Cheers.

[DonRichards]

@ryantxu Just a heads up. Grafana doesn't see the update.

[dmke]

Can confirm, the 0.0.7 build works flawlessly.

Until that version is published on grafana.com, here's what I did on my Grafana server:

$ # backup, optional
$ rsync -av grafana@grafana.example.com:/var/lib/grafana/plugins/ryantxu-ajax-panel/ ./ajax-panel-0.0.6/

$ # download, unzip
$ wget https://github.com/ryantxu/ajax-panel/archive/v0.0.7.zip
$ unzip v0.0.7.zip

$ # update files on server
$ rsync -av ./ajax-panel-0.0.7/ grafana@grafana.example.com:/var/lib/grafana/plugins/ryantxu-ajax-panel/ --delete