Iframe - css help

Hi Folks,

Looking for some css help… I am trying to display an embedded grafana panel via an iframe in to a hubitat dashboard, It displays perfectly when viewing in the virtual device screen but on a dashboard I end up with a significant amount of vertical space.

@spelcheck I saw a reference on the hubitat forum to a css patch you had written for iframe content, I think that was for hubigraphs?

Any help greatly appreciated…

Displays OK…

Too much vertical space … (note when I resize the content doesn’t resize, I’ve expanded so that the content. an be seen in the screenshot )…

I’ve got the following CSS appended to what smartly generated…

tile-81 .tile-title {
display:none;
}
tile-81 .tile-contents, #tile-81 .tile-primary{
padding: 0;
}

2 Likes

@TechMedX also supports smartly. Perhaps he’s around this morning.

3 Likes

Hey man thanks for being a part of our community! Yes so all iframe-bases tiles need some patching to remove the spacing around them. We automatically apply these based on detection of third party tiles, but for a generic iFrame the css in here should work-

Let us know how it goes!

3 Likes

Thanks for the pointers, that worked perfectly!

3 Likes

Think I spoke a bit too soon, when playing around with another dashboard and colour scheme, I can see a border / padding to the right still…

Any ideas where I’m going wrong?

Apart from setting the background to transparent via smartly, I have the following css added

tile-81 .tile-primary,
tile-81 .tile-contents {
height: 100%;
}
tile-81 {
border: 0px none;
}
tile-81 .tile-contents {
height: calc(100%);
}
tile-81 .tile-contents,
tile-81 .tile-primary,
tile-81 .tile-primary>div {
margin: 0;
padding: 0;
}
tile-81 .tile-title {
position: absolute;
z-index: 9;
padding: .25em;
width: 100%;
text-align: center;
opacity: .5;
font-weight: normal;
font-size: .9em;
z-index: 1;
}

I think your missing some "#"s Try this code (I pulled it from my hubigraph tile, and edited it for your tile#)

Always backup your JSON 1st!. Then replace what you have with this.

#tile-81 .tile-primary{
    height:100%;
    margin:0;
    padding:0
}
#tile-81 .tile-contents{
    height:calc(100%);
    margin:0;
    padding:0
}
#tile-81{
    border:0px none
}
#tile-81 .tile-primary>div{
    margin:0;
    padding:0
}
#tile-81 .tile-title{
    font-size:.9em;
    font-weight:normal;
    opacity:.5;
    padding:.25em;
    position:absolute;
    text-align:center;
    width:100%;
    z-index:1
}

Thanks so much - I went through and applied to the 3 tiles and it is a lot better. It hasn’t entirely got rid of the right hand side white space but its barely noticeable now. However, the far right hand tile is still problematic, I’ve applied exactly the same css, I suspect it has something to do with the text within the tile “good” that is causing the issue ?

1 Like

Not sure on that one. Isn’t the text just part of the webpage this is showing? TBH I’m not great at coming up with this stuff, that’s @spelcheck’s job. I just hack his stuff up :shushing_face:

Speaking of hacking, he won’t like this :laughing: but add a width, and then over shoot as needed.

#tile-81 .tile-contents{
    height:calc(100%);
    width:calc(115%);
    margin:0;
    padding:0
}

Example before


After

Nice use of the stat panel btw, I’ve used it for my temp/humidity sensors, I like the combo of the current reading and the trend line.

1 Like