Plot does not resize 100% width after show/hide sidebar in R shiny page

Question

I have a plot which is set to 100% width (default) in the main panel of a two-panel page in R Shiny. The sidebar is hideable through a toggle action button.

When the sidebar is visible (default), the plot fills the width of the main panel. When the sidebar is hidden, I want the plot to expand to fill 100% of the space now available, i.e. the whole browser window. But this does not happen! It keeps the same size.

library(shiny)
library(shinyBS)

UI <- fluidPage(
    bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),
    sidebarLayout(
        conditionalPanel(condition = "input.showpanel == true",
                         sidebarPanel("This is my sidebar.")
                         ),
        mainPanel(plotOutput("plot", width = "100%"))
        )
    )

SERVER <- function(input, output) {
        output$plot <- renderPlot({
        plot(1:10, main = "The width of this plot adjusts\nto window resizes but not to\nshow/hide sidepanel!")
    })
}

runApp(shinyApp(UI,SERVER))

Attempted so far:

• Defining the plot object from within the UI file, as above.
• Defining the plot object from within the server file, as a renderUI object.
• Set CSS tag in the page as per tags$head(tags$style("#myplot{height:100vh !important;}")) from this question, Scaling shiny plots to window height.

Possible work-arounds:

• Make the width of the plot dynamic and depending on the state of the toggle button. Then I can make the plot e.g. 140% width when the sidebar is hidden. This does not generalise well, and loses the point of using the adaptability of fluidPage.

(fluidPage changes the layout dependent on the browser window size. For example, if you make your browser window about the size of a mobile phone, it will place the sidebar above the main panel.)

Answer 1

@konvas answer is really good and probably the way you wan't to do this but if you want to use the sidebarLayout (and for the sake of giving another answer) you can use jQuery to toggle the bootstrap columns like:

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$script(
      HTML("
            $(document).ready(function(){
              // Mark columns we want to toggle
              $('body').find('div [class=col-sm-4]').addClass('sidebarPanel');
              $('body').find('div [class=col-sm-8]').addClass('mainPanel');
            })


            Shiny.addCustomMessageHandler ('resize',function (message) {
              $('.sidebarPanel').toggle();
              $('.mainPanel').toggleClass('col-sm-8 col-sm-12');
              $(window).trigger('resize')
            });

           ")
    )
  ),
  actionButton("showpanel", "Show/hide sidebar"),
  sidebarLayout(
    sidebarPanel("This is my sidebar."),
    mainPanel(plotOutput("plot", width = "100%"))
  )
)

server <- function(input, output, session) {
  observeEvent(input$showpanel,{
    session$sendCustomMessage(type = 'resize', message = 1)

  })
  output$plot <- renderPlot({
    plot(1:10, main = "The width of this plot adjusts\nto window resizes but not to\nshow/hide sidepanel!")
  })
}

runApp(shinyApp(ui,server))

The same methodology would apply if you use columns in a fluidRow or something similar.