Remove I frame border

stephanvdplas

@sdetweil said in Remove I frame border:

@stephanvdplas if the border is INSIDE the frame, then u cannot change it. that is the point of frame. inline embedded frame of original content

There is certainly no border in the content. At least not what I see when using differen devices with this same URL

Also the border appears directly, whereas the content is loaded in 5 seconds

sdetweil

@stephanvdplas awesome. I’m not sure of the css, but I want to teach you how you can find and resolve it yourself for any content

see
https://forum.magicmirror.builders/post/90135

using the browser developers window, you can examine AND set styles on the element content. once you know what you need, then you can copy/paste that into custom.css

I ‘think’ the example css provided is too vague, and the actual element doesn’t inherit from the content selected

in css, the stuff before the { is called the selector clause. it selects the content that the stuff AFTER the { will be applied to.

I use thise cheat sheet to hemp me remember all the possibilities
https://www.w3schools.com/cssref/css_selectors.php

in MagicMirror the outer block is given the module name as a class
so
.MMM-iFrame
is correct, but, that element is a div
and there are a couple more div elements inside, so I don’t think border:none is inherited.

I ‘think’ the selector clause needs the specific element iframe added

.MMM-iFrame iframe {

but if you use the developers window you will know for sure

stephanvdplas

<iframe src="https://server.vdplas.net:8999/material/?player=dc:a6:32:18:b6:fd&amp;layout=desktop&amp;action=expandNowPlaying/true&amp;css=msk--np-only&amp;js=msk--np-only&amp;single=true&amp;theme=Black" width="675" height="250" scrolling="no"></iframe>

iframe[Attributes Style] {
    width: 675px;
    height: 250px;
}
user agent stylesheet
iframe {
    overflow-clip-margin: content-box !important;
    overflow: clip !important;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
}

Here indeed I see a border. Still no clue where it comes from.

stephanvdplas

@sdetweil I found it!

In custom.css I place the following section:

iframe{

border:0 ; 
/*transform: scale(0.5) ; */
/*margin-bottom: 200px;*/

}

(source: https://github.com/AgP42/MMM-iFrame-Ping/blob/master/MMM-iFrame-Ping.css)

Thanks for your support!

sdetweil

@stephanvdplas please be careful…

the selector clause WILL ALWAYS select ALL elements that match across the entire web page…

so, you should focus on THIS module

.MMM-iFrame iframe{

border:0 ; 

}

that means ALL iframe tags <iframe
inside class .MMM-iFrame

but not any OTHER module