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

The problem is that using the sidebarLayout you create two bootstrap columns one with class `col-sm-4` for the sidebar and one with class `col-sm-8` for the plot this is why your plot wont re-size to larger than ~66% of the screen. — RmIu, Oct 29 '15 at 17:42

score 8 · Answer 1 · answered Oct 29 '15 at 20:57

@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.

Also a great answer, I don't have much experience with Java but this is what I was expecting the solution to be. Went with @konvas answer for reasons of parsimony. Thanks! — dynamo, Dec 07 '15 at 18:22
Thank you. I think his answer is really good, Glad I could help anyway! — RmIu, Dec 07 '15 at 21:49

score 7 · Accepted Answer · edited May 23 '17 at 12:09

One way to do this would be to use a reactive layout (there are many questions on this eg Switch between layouts reactively with shiny). In your case that would be something like

library(shiny)
library(shinyBS)

UI <- shinyUI(
        fluidPage(
            bsButton("showpanel", "Show/hide sidebar", type = "toggle", value = TRUE),
            uiOutput('ui')
        )
    )

SERVER <- function(input, output) {

    output$ui <- renderUI({
        if (input$showpanel) {
            sidebarLayout(
                sidebarPanel("This is my sidebar."),
                mainPanel(plotOutput('plot'))
            )
        } else {
            plotOutput('plot')
        }
    })

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

runApp(shinyApp(UI,SERVER))

Works perfectly - thanks! Also has the benefit of keeping basically all of my code in one file. I just wasn't thinking outside of the box... — dynamo, Dec 07 '15 at 18:22

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

2 Answers2