{"action":"created","issue":{"url":"https://api.github.com/repos/ramnathv/slidify/issues/429","labels_url":"https://api.github.com/repos/ramnathv/slidify/issues/429/labels{/name}","comments_url":"https://api.github.com/repos/ramnathv/slidify/issues/429/comments","events_url":"https://api.github.com/repos/ramnathv/slidify/issues/429/events","html_url":"https://github.com/ramnathv/slidify/issues/429","id":77844356,"number":429,"title":"Including DiagrammeR and iframe background","user":{"login":"ekstroem","id":6160801,"avatar_url":"https://avatars.githubusercontent.com/u/6160801?v=3","gravatar_id":"","url":"https://api.github.com/users/ekstroem","html_url":"https://github.com/ekstroem","followers_url":"https://api.github.com/users/ekstroem/followers","following_url":"https://api.github.com/users/ekstroem/following{/other_user}","gists_url":"https://api.github.com/users/ekstroem/gists{/gist_id}","starred_url":"https://api.github.com/users/ekstroem/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ekstroem/subscriptions","organizations_url":"https://api.github.com/users/ekstroem/orgs","repos_url":"https://api.github.com/users/ekstroem/repos","events_url":"https://api.github.com/users/ekstroem/events{/privacy}","received_events_url":"https://api.github.com/users/ekstroem/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-05-18T23:15:24Z","updated_at":"2015-05-19T13:54:36Z","closed_at":null,"body":"Hi all,\r\n\r\nI'm trying to get slidify to work together with a diagram created by DiagrammeR. I read in one of the issues here that slidify and htmlwidgets don't play nicely together yet, but there were some suggestions to get things up and running by saving the widget as html and then including that in `iframe`. \r\n\r\nI've included my example below. My \"current\" problem is that when including the widget in the iframe the background becomes white. Can I change that in some way so that it blends into the general format for my slides (i.e., have my background as transparent)?\r\n\r\n```\r\n---\r\ntitle       : Test\r\nsubtitle    : \r\nauthor      : Claus\r\njob         : \r\nframework   : revealjs      # {io2012, html5slides, shower, dzslides, ...}\r\nhighlighter : highlight.js  # {highlight.js, prettify, highlight}\r\nhitheme     : zenburn       # \r\nwidgets     : [mathjax angularjs]     # {mathjax, quiz, bootstrap}\r\nmode        : standalone   # {selfcontained, standalone, draft}\r\nknit        : slidify::knit2slides\r\nrevealjs    :\r\n  theme: serif \r\n  incremental: true\r\n---\r\n\r\n## Read-And-Delete\r\n\r\n1. Edit YAML front matter\r\n2. Write using R Markdown\r\n3. Use an empty line followed by three dashes to separate slides!\r\n\r\n--- .class #id \r\n\r\n\r\n<style>\r\niframe {\r\n  width: 800px;\r\n  height: 600px;\r\n  background: #AA0000;\r\n}\r\n</style>\r\n<style>iframe.nvd3{height: 600px;width: 800px}</style>\r\n\r\n## Slide 2\r\n\r\n   ```{r,echo=FALSE,results=FALSE,warning=FALSE}\r\n   library(htmlwidgets)\r\n   library(DiagrammeR)\r\n    ```\r\n\r\n   ```{r echo=FALSE, warning=FALSE,cache=FALSE,results='asis'}\r\nfff <- DiagrammeR::grViz(\"\r\n  digraph neato {\r\n\r\n  \r\n    rankdir=LR;\r\n    node[width=1,height=1,fixedsize=true];\r\n\r\n    { rank=same; B ; C}\r\n\r\n    edge[weight=20];\r\n    A -> B [label='&beta;'];\r\n    B -> O [label='&gamma;'];\r\n    edge[weight=1];\r\n\r\n    C -> { B O }\r\n    \r\n    A -> O[label='&beta;&gamma;'];\r\n  \r\n    A[label='Assigned\\ntreatment',shape=circle,fillcolor='lightblue',style='filled'];\r\n    B[label='Actual\\ntreatment',shape=circle,fillcolor='lightblue',style='filled'];\r\n    C[label='Confounder',shape=circle,fillcolor='MistyRose',style='filled'];\r\n    O[label='Outcome',shape=circle,fillcolor='lightblue',style='filled'];\r\n\r\n\r\n  }\r\n\", width=650, height=400, engine=\"dot\")\r\n\r\nsaveWidget(fff, 'diagram.html')\r\ncat('<iframe src=\"diagram.html\" width=100% height=100% allowtransparency=\"true\" style=\"background: #FFCCFF;\"> </iframe>')\r\n\r\n   ```\r\n\r\n\r\n```"},"comment":{"url":"https://api.github.com/repos/ramnathv/slidify/issues/comments/103504600","html_url":"https://github.com/ramnathv/slidify/issues/429#issuecomment-103504600","issue_url":"https://api.github.com/repos/ramnathv/slidify/issues/429","id":103504600,"user":{"login":"ekstroem","id":6160801,"avatar_url":"https://avatars.githubusercontent.com/u/6160801?v=3","gravatar_id":"","url":"https://api.github.com/users/ekstroem","html_url":"https://github.com/ekstroem","followers_url":"https://api.github.com/users/ekstroem/followers","following_url":"https://api.github.com/users/ekstroem/following{/other_user}","gists_url":"https://api.github.com/users/ekstroem/gists{/gist_id}","starred_url":"https://api.github.com/users/ekstroem/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ekstroem/subscriptions","organizations_url":"https://api.github.com/users/ekstroem/orgs","repos_url":"https://api.github.com/users/ekstroem/repos","events_url":"https://api.github.com/users/ekstroem/events{/privacy}","received_events_url":"https://api.github.com/users/ekstroem/received_events","type":"User","site_admin":false},"created_at":"2015-05-19T13:54:36Z","updated_at":"2015-05-19T13:54:36Z","body":"Not exactly an elegant solution but a bit of CSS'ing got me where I wanted. Forcing the body background to be transparent within the slides did the trick (in combination with `allowtransparency=\"true\"`). I've included the changes be below so others can see it. \r\nFeel free to close it unless you'd want to keep it as a reminder to get slidify to play with htmlwidgets.\r\n\r\nClaus\r\n\r\n```\r\n<style type=\"text/css\">\r\nbody {background:none transparent;\r\n}\r\n</style>\r\n\r\n\r\n  ```{r echo=FALSE, warning=FALSE,cache=FALSE,results='asis'}\r\nfff <- DiagrammeR::grViz(\"\r\n  digraph neato {\r\n\r\n  \r\n    rankdir=LR;\r\n    node[width=1,height=1,fixedsize=true];\r\n\r\n    { rank=same; B ; C}\r\n\r\n    edge[weight=20];\r\n    A -> B [label='&beta;'];\r\n    B -> O [label='&gamma;'];\r\n    edge[weight=1];\r\n\r\n    C -> { B O }\r\n    \r\n    A -> O[label='&beta;&gamma;'];\r\n  \r\n    A[label='Assigned\\ntreatment',shape=circle,fillcolor='lightblue',style='filled'];\r\n    B[label='Actual\\ntreatment',shape=circle,fillcolor='lightblue',style='filled'];\r\n    C[label='Confounder',shape=circle,fillcolor='MistyRose',style='filled'];\r\n    O[label='Outcome',shape=circle,fillcolor='lightblue',style='filled'];\r\n\r\n\r\n  }\r\n\", width=650, height=400, engine=\"dot\")\r\n\r\nsaveWidget(fff, 'diagram.html')\r\ncat('<iframe src=\"diagram.html\" width=100% height=100% allowtransparency=\"true\"> </iframe>')\r\n\r\n  ```\r\n```"}}