Htmlwidgets within tabs apart from active tab do not load/size correctly

[schliebs]

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

knitr::opts_chunk$set(echo = TRUE)

library(htmltools)
library(materializeR)
library(dygraphs)

# Create Example Graph: 

dg <- 
  dygraph(cbind(mdeaths, fdeaths),
          width =  NULL,
          height = 150)



# Create Tabs

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

`

I would be most grateful for any help.

[timelyportfolio]

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 timelyportfolio/parcoords#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.

[timelyportfolio]

hmmmm, I just tried your code with browsable/non-Rmd and it seems to work fine. Will continue to research....

[timelyportfolio]

Well actually, sometimes it does and sometimes it doesn't.

[schliebs]

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!

[timelyportfolio]

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();
  })
});
"
      ))
    )
  ) 
)
)