Open schliebs opened 7 years ago
Thanks for using materializeR
. I have not spent any time with it since it seemed nobody cared :). Tabs (in any framework) and htmlwidgets often don't get along. See https://github.com/timelyportfolio/parcoords/issues/20 as one reference. You will see some lines in dygraphs that show how RStudio handles resize for various tab scenarios, but it is impossible to incorporate all. I will see if I can figure out a workaround for now and report back.
hmmmm, I just tried your code with browsable
/non-Rmd and it seems to work fine. Will continue to research....
Well actually, sometimes it does and sometimes it doesn't.
Thank you for your answer! In the meantime, I had briefly stumbled across the fact that it sometimes worked in browsable but never in rmd, which I am dependent on because I need to create many html-files with different input.
In the meantime, I have had to opt for flexdashboard as a workaround, which is a pity since the materializeR-layout is really beautiful. Thank you very much for you work!
This should work,
library(htmltools)
library(materializeR)
library(dygraphs)
# Create Example Graph:
dg <-
dygraph(cbind(mdeaths, fdeaths),
width = NULL,
height = 150)
# Create Tabs
browsable(
tagList(
materialize(), # can be anywhere; I like to put first so I don't forget
tags$html(
tags$head(),
tags$body(
div(class = "row",
div(class = "col s12",
tags$ul(class = "tabs",
tags$li(class = "tab col s3",
tags$a(href = "#test1",
"Tab 1")
),
tags$li(class = "tab col s3",
tags$a(href = "#test2",
"Tab 2")
)
)
),
div(id = "test1",class = "col s12",
#Content Tab1
div(id = "tab1r1",class = "row",
"Test Tab1"
),
div(id = "tab1r2",class = "row",
dg)
# End Content Tab 1
),
div(id = "test2",class = "col s12",
# Content Tab2
div(id = "tab2r2",class = "row",
"Test Tab2"
),
div(id = "tab2r2",class = "row",
dg)
# End Content Tab2
)
),
tags$script(HTML(
"
$(document).ready(function(){
$('ul.tabs').on('click', function(evt) {
console.log('resizing');
HTMLWidgets.find($(evt.target).attr('href') + ' .dygraphs').resize();
})
});
"
))
)
)
)
)
I have an issue with some htmlwidgets embedded in tabs. When opening the html-document rendered with rmarkdown, the widget on the first tab is loaded correctly. The widget on the second tab, however, does not load correctly, unless/until the whole window is resized manually. When the window is resized manually, in return, the widget on the first tab does not work correctly anymore.
The problem - as I think I have understood - is that the size of the div in the "not-yet-loaded" tab is 0 when the graphs are rendered that the dygraph only receives a size when a resize is done manually on that very page.
I think adding some javascript that triggers a resizing when changing the tab (something with g.resize() ) might to the trick here, but without advanced js-skills, I have not succeeded in trying to do so.
` R-Markdown-Code for replication:
output: html_document
`
I would be most grateful for any help.