Panel: true w/ iframe card, how to span full height? SOLVED

Configuration Frontend
1

I am trying to put a tab in my custom compact header for my music player. I am using this on a wall mounted tablet where the sidebar will be hidden so I would like it to be up top in the header.

I have tried the following, but it does not auto adjust to the height in portrait views. Is there an easy way to make it always fill the vertical height.

EDITED for solution. Requires card-mod

title: Music
panel: true
    cards:
      - type: iframe
        style: |
          #root {
            height: calc(100vh - 48.5px);
            padding-top: 0 !important;
          }
        url: https://REDACTED/
3 Likes
2

I am doing the exact same thing with a node red dashboard and with the same configuration (panel: true) it fills all the page.
Have you tried to use https://REDACTED/ outside HA to check whether it looks the way you want?

GV

3

Yeah it works fine. It also works perfectly fine as a panel_iframe on the sidebar.

It looks great in landscape mode, but on a phone or my wall tablet it is not stretching for portrait.

4

The experts would tell you to look at the developer views on your browser… but I am not :slight_smile:
So, I don’t know!

GV

5

Yeah. I am sure I can figure it out, but figured that surely someone else had tried this before.