When controlbar is expanded/collapsed, a plot does not fit in body

[stephLH]

Hi David,

I have an issue when I expand or collapse the control bar, the plot does not adapt its size in body, eg reduces when controlbar is expanded, or increases when controlbar is collapsed.

This behaviour is not happening with sidebar, that's why I thought it might be fixed with control bar ?

Here is a reprex :

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPagePlus(
  dashboardHeaderPlus(
    enable_rightsidebar = TRUE,
    rightSidebarIcon = "filter"
  ),
  dashboardSidebar(),
  rightsidebar = rightSidebar(
    .items = selectInput("input", "label", choices = c("test1", "test2"))
  ),
  dashboardBody(
    plotOutput("plot")
  )
)

server <- function(input, output) {
  output$plot <- renderPlot({
    plot(mtcars)
  })
}

shinyApp(ui, server)

[DivadNojnarg]

This is expected. The controlbar has a cover behaviour not like the left sidebar. AdminLTE2 has some internal options to change that.

[stephLH]

OK, I also initially thought it can be an issue because widgets like valueBoxes are on the other hand resized automatically in this case. So If you have on the same page a valueBox and a plot, the UI can be like confusing for the user.

[zichner]

I guess the issue is that with the current version of shinydashboardPlus, the controlbar is not covering the content below but rather causes a resize of the elements. Compare https://rinterface.com/shiny/shinydashboardPlus/ and https://adminlte.io/themes/AdminLTE/index2.html (when opening the controlbar in shinydashboardPlus, the page title gets affected, whereas when opening the controlbar in adminLTE none of the elements get affected).

If I am not mistaken, this was different in an earlier version of shinydashboardPlus.

[zichner]

Hi @stephLH, by adding the following code snippet to your Shiny UI function you can fix the issue with plots not getting resized:

tags$script(HTML(
    "$(\".control-sidebar\").on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { $(window).trigger(\"resize\"); } );"
))

This is based on the pull request #28 by @Evizero

@DivadNojnarg: Is the current behavior (resizing of the page when the right sidebar is opened) desired or should the sidebar rather overlay the page without any resizing? Thanks!

[stephLH]

Thanks a lot @zichner, I did not see this PR when searching fo similar issues.

I would personally vote for an automatic resize by default in this case.

[stephLH]

Sorry my test was not complete when I did my last comment.

When I use the JS script the filter input is no longer visible within the control bar :

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPagePlus(
  dashboardHeaderPlus(
    enable_rightsidebar = TRUE,
    rightSidebarIcon = "filter"
  ),
  dashboardSidebar(),
  rightsidebar = rightSidebar(
    tags$script(HTML(
      "$(\".control-sidebar\").on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { $(window).trigger(\"resize\"); } );"
    )),
    .items = selectInput("input", "label", choices = c("test1", "test2"))
  ),
  dashboardBody(
    plotOutput("plot")
  )
)

server <- function(input, output) {
  output$plot <- renderPlot({
    plot(mtcars)
  })
}

shinyApp(ui, server)

If you look at the code pointed by @Evizero in https://github.com/rstudio/shinydashboard/blob/281b9f2761c3504ed769a744b8520c8be35f1706/inst/shinydashboard.js#L87-L105 there is also a section dealing with inputs :

var sidebarChange = function() {
  // 1) Trigger the resize event (so images are responsive and resize)
  $(window).trigger("resize");

  // 2) Update the value for the sidebar's input binding
  var $obj = $('.main-sidebar.shiny-bound-input');
  var inputBinding = $obj.data('shiny-input-binding');
  inputBinding.setValue($obj, sidebarCollapsedValue());
  $obj.trigger('change');
};

[savemark]

I also vote for automatic resizing.