Iframe - css help

Support
#1

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…

image
image1907×1275 103 KB

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 )…

image
image1855×863 266 KB

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
#2

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

3 Likes
CSS help for threedayfrcst
#3

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
#4

Thanks for the pointers, that worked perfectly!

image
image1895×728 208 KB

3 Likes
#5

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?

image
image1189×742 105 KB

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;
}
#6

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
}
#7

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 ?

image
image2388×1668 257 KB

1 Like
#8

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

image
image726×355 31.7 KB

After
image
image733×346 27.2 KB

#9

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