Embedding works great !! However, I have seen that a grey border appears around the embedded charts. Is there any way this can be removed ? I was thinking a css style in one of the cells might do the work, but then which element should I target and which attribute ?
Something like this:
XX? {
border: 0px solid
}
Hi @rezpe, I donât see this; could you post an example? You can use iframe embeds on this forum if you put the iframe tag embed code on its own line.
Thereâs clearly a thin border around the whole thing. I suspect @thomasballinger that youâre not seeing it since youâre so accustomed to thinking itâs supposed to be there.
Firefoxâs inspector indicates that the body of the outermost iframe in an embed has the style âborder: solid 1px #eeeâ. I guess thatâs whatâs causing it. Unfortunately, I donât know that itâs possible to get at this CSS. A style block in your HTML document containing the iframe wonât affect elements in side the iframe and you canât get to it from code within your notebook either.
Hmm⌠I definitely see it in both very new Firefox and Chrome on my MacBook Pro. It really looks like quite intentional but itâs only 1px #eee, so itâs quite subtle:
Ah, youâre referring to that border. Yeah, that one is enforced by the embed document served by Observable, and (afaik) canât be removed by either the notebook or the embedding page.
Ah thanks for the clarifying diagram! Yes I see that border. Itâs helpful to hear that youâd like to get rid of this. Beyond attribution of the author of the notebook being important to us, we can talk about customizing the look of the embed. We chose that border because it seemed helpful in the common case to have a border that outside styles couldnât inadvertently modify, but I can see how itâs frustrating that itâs out of your control. Note taken!
Thanks for the answer ! Well, the use case is to use a visualization made by me on observable in my own website. So I do not require credits nor border for this. I do not know if you have considered this use case.
I would recommend using embedding using the âRuntime with Javascriptâ option, since itâs highly configurable allowing you to do exactly what you want and much more.
I would only recommend using the iframe embed if you weâre working with restricted environment thatâs specifically configured to force you to use an iframe. Examples include this forum and certain Wordpress configurations.
Other examples of sites that restrict one to iFrames may include Slack, Skype, MS Teams, Twitter, GitHub, and probably most other social sites. Admittedly, this is pure speculation as I am not social outside of this forum and nothing stated here is tested.
(Seconding Tom, the border was a deliberate choice to demarcate the Iframe, which is more of a black box than the Runtime methods, since itâs hosted on observablehq.com with Observable styles. Seconding mcmcclur, if you want deeper integration / customization, you can use âRuntime with JavaScriptâ.)
Wow, sad news for social sites! Thanks, @tophtucker! I owe you a thank you and follow-up on another thread. I am sure you know I appreciate all you do!