[FR] Hide header on iframe page

[chriexpe]

First of all I'd like to thank you for continuing the kiosk-mode project, it works like a charm!
My situation is the following about iframe: I have one tablet dedicated to Home Assistant on Kiosk Mode, and one of the tabs I also added my NVR webpage, so I can check the cameras and recordings without leaving Fully Kiosk Browser app, but I find hideous that huge header that has no use whatsoever and only occupies valuable space, especially on smaller screens.
So I wonder, is it possible to hide it?

The print above is the iframe of NVR page and that header showing up.

[elchininet]

Hi @chriexpe,
Kiosk-mode is intended for hiding general things that are present in every Home Assistant installation. But even if we ignore this, what you want is technically impossible because if two documents do not have the same origin (same protocol, domain, and port), then the scripts loaded in one origin cannot make changes in the other, specially with iframes. So you would not be able to do that even using card-mod. You need to remove that header in the origin that is serving that page.
Regards

[chriexpe]

technically impossible because if two documents do not have the same origin (same protocol, domain, and port), then the scripts loaded in one origin cannot make changes in the other

So that "AgentDVR" header with HA buttons like Search/Assistant/Edit are over the iframe? I tried inspecting the element and even if I remove it, there's still a bar behind that can't be separated from the iframe...
Well, that would be a issue with HA fronted then, but I'm pretty sure they won't bother to change that,

[elchininet]

So that "AgentDVR" header with HA buttons like Search/Assistant/Edit are over the iframe?

The regular header (the one with the views and with the buttons to search and assist) is an element that belongs to the main document. It will be there even if you don't have any iframe.

Well, that would be a issue with HA fronted then, but I'm pretty sure they won't bother to change that,

Most probably. When I mentioned that you would need to remove it in the origin that is serving the page, I was referring to do it manually in the source code. I don't think that the developers will accept to remove a header just to match your use case, but at least you can ask how to do it by yourself.

[elchininet]

Hi @chriexpe,
I was inspecting the source code of the addon and I don't see any html page there, it is just a wrapper around agent-py.

Most probably some hack can be done with card-mod adding styles to the wrapper of the iframe. I'll try to check if it is possible this afternoon and if it is possible I'll post the workaround here.

[elchininet]

Hi @chriexpe,
Here you are the workaround:

Using a card-mod theme. Supposing that the height of that header is 100px, the trick is to translate the iframe away of the screen the amount of pixels of that header, and sum this amount to its height.

Note: replace the-name-of-your-theme by the name of your theme, something by some string contained in the src of the iframe and 100px by the real height of that header.

card-mod-theme: the-name-of-your-theme
  card-mod-view-yaml: |
    hui-panel-view$:
      hui-iframe-card$: |
        iframe[src*="something"] {
          height: calc(100% + 100px);
          margin-top: -100px;
        }