RinteRface/bs4Dash

plotly charts not always (re)scaling with browser size

mattapel opened this issue · 3 comments

mattapel commented

Such a great package! Thanks a lot for this.

I have an issue that does not seem to occur for any obviuous reason: plotly charts inside boxes SOMETIMES won't (re)scale according to the size of the browser window (using chrome). Instead they are rendered in size according to some preset standards.

I have tried to tweak it with setting plotlyOutput in UI to width and height = "100%", but it won't ensure this issue from occuring. It seems to me, more complicated layouts are more prone to this. Somewhere I read, it could be related to bootstrap. Or am I getting something wrong?

Like this example:

    bs4TabItem(
      tabName = 'panel',
      fluidRow(
               bs4Card(width=12, title='blabla', solidHeader=TRUE, status='gray', collapsible=FALSE,
                       fluidRow(
                         column(width=6,
                          tags$img(src='bla.png', width='100%', height='100%')
                              ),
                         column(width=6,
                          plotlyOutput(outputId='bla', width='100%', height='100%')
                 )
          )
        ) #close card
    ))
DivadNojnarg commented

Hi,

thanks for the feedback. This is a known issue which happens for many htmlwidgets (including plotly). See #262, #254, ...

Some work has been done in the {bslib} package to overcome this issue: https://rstudio.github.io/bslib/articles/cards.html#responsive-sizing. When I have some time, I'll check what they did in the code and why it's not working all the time in bs4Dash (my guess would be a timing issue with animations).

mattapel commented

Hi
thank you for your quick reply. I thought that maximizing to full screen issue is systematic, because it never worked when I tried (some months ago). Whereas the sizing within a box usually works, just not always.

Would be really great if this could be resolved. It's the first time and sort of a test baloon we use R/Shiny, thus having most of the development done outside the IT department...
Kind regards!

swsoyee commented

Hi, @DivadNojnarg ,
Have you considered adding an event handler at the maximize button so that we could observer it if maximize is clicked and using resize() function provided by htmlwidgets libraries.

observeEvent(input$maximize_clicked, {
    someHtmlWidgets(inputId) |> resize()
  })
  • 👍1