Make sidebarPanel autoscroll with mainPanel in shiny

Question

I made a sidebarLayout in shiny which allows for scrolling in the mainPanel in case of overflow. The sidebarPanel's position remains fixed, such that it disappears as you scroll down the mainPanel. However, I'd like it to scroll with the mainPanel, so that the user doesn't need to scroll up again to change settings. How do I do this?

Basic setup:

ui = fluidPage(

  tags$style(type='text/css', 'body { overflow-y: scroll; }'),

  titlePanel(
    # ...
  ),

  sidebarLayout(

    sidebarPanel(
      # ...
      width = 3),

    mainPanel(
      # ...

      width = 9 )

  ))

server = function(input,output,session) {

  # ...

}

shinyApp(ui=ui, server=server)

Answer 1

You can add style = "position:fixed;width:inherit;" to your sidebarPanel, but you will loose padding for your element, and the width will be exactly 1/4 (25%) of your page, put 22% for example if you want more space between sidebar panel and main panel.

example :

library("shiny")

ui <- fluidPage(

  titlePanel(
    "Fixed sidebar panel"
  ),

  sidebarLayout(

    sidebarPanel(
      style = "position:fixed;width:inherit;",
      "Inputs",
      width = 3),


    mainPanel(

      lapply(
        X = 1:20,
        FUN = function(i) {
          plotOutput(outputId = paste("plot", i, sep = "-"))
        }
      ),

      width = 9 )

  ))

server <- function(input, output, session) {

  lapply(
    X = 1:20,
    FUN = function(i) {
      output[[paste("plot", i, sep = "-")]] <- renderPlot({plot(rnorm(10))})
    }
  )

}

shinyApp(ui = ui, server = server)